<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://wwwhaaocn/logogif" width="88"></td>
<td><img src="http://wwwhaaocn/logogif" width="88"></td>
<td><img src="http://wwwhaaocn/logogif" width="88"></td>
<td><img src="http://wwwhaaocn/logogif" width="88"></td>
<td><img src="http://wwwhaaocn/logogif" width="88"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demo2offsetWidth-demoscrollLeft<=0)
demoscrollLeft-=demo1offsetWidth
else{
demoscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
我的这段代码不会出现跑一段就停下的现象
<DIV align=center>
<DIV id=scroll_div
style="OVERFLOW: hidden; WIDTH: 778px;"
align=center>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD id=scroll_begin>
<A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A></TD>
<TD id=scroll_end>
</TR></TBODY></TABLE>
</DIV></DIV>
<SCRIPT>
var speed=30
var scroll_end = documentgetElementById("scroll_end");
var scroll_div = documentgetElementById("scroll_div");
scroll_endinnerHTML=scroll_begininnerHTML
function Marquee(){
if(scroll_endoffsetWidth-scroll_divscrollLeft<=0)
scroll_divscrollLeft-=scroll_beginoffsetWidth
else{
scroll_divscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
scroll_divonmouseover=function() {clearInterval(MyMar)}
scroll_divonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
html文件笔记本什么的都可以修改,可以直接以浏览器运行,但是一个网站和一个网页差别很大的,一般网上有模版,懂点html都可以修改,这个不难,做个网页用一模板修改就行,可以自己上网找然后修改。一般有这个代码就可以了。
1、在生成HTML时将样式直接以style=""写在标签上;也就是使用行内样式
例如:
//动态生成html时,给html赋值行内样式$("body")append("<div style='width:100px;height:100px;background:red;'>动态生成的div</div>");
2、预先定义好css样式,动态生成html时,将css类赋值给html
例:
/定义css样式/content{
width:100px;
height:100px;
background:red;
}//在动态生成html时,将css样式赋值class
$("body")append("<div class='content'>动态生成html赋值class样式</div>");
总结:在动态生成html标签时,直接使用行内样式快捷,但不容易修改;使用预先定义好的css样式赋值html标签的class属性,容易修改;建议使用后者。
<label><span>都可以用。 <div>也可以。
实现方法很多,不一一举例了。给你一个思路
<div id="msg1" style="display:none">提示1</div>
<div id="msg2" style="display:none">提示2</div>
用js 去判断文本框的value,然后去控制标签的id的display:为空,,那么这个标签就显示了。
1、直接贴图:
在界面上贴一个gif动态等待效果
gif获取方式:网上找素材,会ps的可以自己制作
<img src="waitgif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果:
这种效果:网上有很多类似素材,可以根据需要选择,或使用上述技术绘制
下面提供一个CSS3绘制的范例
<style>
loading {
width:0;
height:0;
border-right:20px solid #fff;
border-top:20px solid #000;
border-left:20px solid #fff;
border-bottom:20px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
loading {
animation: bganim 06s linear 0s infinite;
-moz-animation: bganim 06s linear 0s infinite;
-webkit-animation: bganim 06s linear 0s infinite;
}
@keyframes bganim {
from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }
}
</style>
<label>CSS3效果</label>
<div class="loading"></div>
-------------------------------------------------
效果如下图:
运行机制很简单,先手动绘制一个静态的图,然后控制对应div进行360度旋转,即可实现
3、使用js等待效果插件(如:spinjs)
JS
-----------------------------------------------------
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
};
var target = documentgetElementById('img_wait');
var spinner = new Spinner(opts)spin(target);
7
html
---------------------------------
<div id="img_wait"></div>
欢迎分享,转载请注明来源:表白网
评论列表(0条)