<marquee> ... </marquee> 移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等 方向 <direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移!</marquee> 方式 <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee> <marquee behavior=slide>只走一次就歇了!</marquee> <marquee behavior=alternate>来回走</marquee> 循环 <loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P> <marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee> <marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee> 速度 <scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee> 延时 <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee> 外观(Layout)设置 对齐方式(Align) <align=#> #=top, middle, bottom <font size=6> <marquee align=# width=400>啦啦啦,我会移动耶!</marquee> </font> 底色 <bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee> 面积 <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee> 空白 (Margins)<hspace=# vspace=#> <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee> 文字很慢滚。 <marquee οnmοuseοver=this.stop() οnmοuseοut=this.start() > 鼠标放上去停止滚动,移开继续滚动。 </marquee> 鼠标放上去停止滚动,移开继续滚动。 <marquee direction=left scrollamount=3> 文字向左滚。 </marquee> 先制作向上滚动的效果: 插入代码: <!-- 指向链接图片url --> <base href="http://www.it365cn.com"> <div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff> <div id=demo1> <!-- 定义图片 --> <img src="images/logo_1.gif"> <img src="images/logo/flashempire.gif"> <img src="images/logo.gif"> <img src="images/logo/5dmedia.gif"> <img src="images/logo/macromedia.gif"> <img src="images/logo/sucaiw.gif"> <img src="images/logo/blueieda.gif"> <img src="images/logo/htmlcn.gif"> <img src="images/logo/fwcn.gif"> </div> <div id=demo2></div> </div> <script> 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.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script> 制作向下滚动的效果: 将上面“制作向上滚动的效果”中的红色字体Js部分替换成: <script> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script> 制作向左滚动的效果: <base href="http://www.it365cn.com"> <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif"> </td> <td id=demo2 valign=top></td> </tr> </table> </div> <script> var speed=30 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.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script> 制作向右滚动的效果: 将上面“制作向左滚动的效果”中的红色字体Js部分替换成: <script> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script>
横向竖向各种速度的跑马灯
最新推荐文章于 2023-02-14 12:01:56 发布