网页上的图片移动效果很多, 我也摘录了一个, 其实现原理好像是放胶片电影,展示的图片一张张排列在底片上,并把底片首尾相接成一个圆环,就可以连续放映了. 方法是用 js 来实现的,看一下吧.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 884px; COLOR: #000000; height:153px;">
<TABLE cellSpacing="0" cellPadding="0" width="884" border="0" height="153">
<TR>
<TD id="demo1">
<TABLE cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD><img src="您的图片地址" border="0" alt="图片说明1" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明2" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明3" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明4" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明5" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明6" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明7" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明8" width="117" height="110"/></TD>
<TD><img src="您的图片地址" border="0" alt="图片说明9" width="117" height="110"/></TD>
</TR>
</TABLE>
</TD>
<TD id="demo2" width="1"></TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
<SCRIPT language=JavaScript type=text/JavaScript>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
|
阅读(568) | 评论(0) | 转发(0) |
