1.一种常用的无缝滚动代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <TITLE>滚动图片代码演示-志文工作室</TITLE><base<div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> <img src="gfjs.gif"><br /><img src="bxtt.gif"><br /><img src="bzjd.gif"><br /> </div> <div id=demo2></div> </div> <script language="javascript"> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> |
2.横向滚动图片代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <HTML><HEAD><TITLE>横向滚动图片代码演示-志文工作室</TITLE><meta name="description" content="横向滚动图片代码演示"><META http-equiv=Content-Type content="text/html; charset=gb2312"><META content="MSHTML 6.00.2800.1264" name=GENERATOR><base</HEAD><BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0"><CENTER> <TABLEstyle="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"cellSpacing=0 cellPadding=0 width=750 align=center border=0> <TBODY> <TR> <TD> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center"> <p>2</p> </div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td> <td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td> </tr> </table></TD> <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV> <SCRIPT>var speed3=25//速度数值越大速度越慢demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed3)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}</SCRIPT> </TD></TR></TBODY></TABLE></TD></TR></TABLE></CENTER><br /><br /></BODY></HTML> |
3.marquee标记的含义及参数说明
align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加靠上（top）和靠下（bottom）两种位置。
Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六进制数的。
Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向上（up）、向下（down）。
Behavior：用于设定滚动的方式，主要由三种方式：
behavior="scroll"表示由一端滚动到另一端；
behavior="slide":表示由一端快速滑动到另一端，且不再重复；
behavior="alternate"表示在两端之间来回滚动。
Height：用于设定滚动字幕的高度。
Width：则设定滚动字幕的宽度。
Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越快。
scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。
Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
例子：
1 2 3 | <marquee onMouseOver="this.stop()" onMouseOut="this.start()" scrollAmount="3" scrollDelay="3" direction="left" width="100%" height="100%" align="left" behavior="alternate"></marquee> |
