JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动
<!-- 指向链接图片的URL --><div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"> <div id="demo1"><!-- 定义内容--><a href="#">1 一</a><br>2 二<br>3 三<br>5 四<br>6 五<br>4 六<br><!-- 定义内容 end--> </div> <div id="demo2"></div></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=30; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTML;demo.scrollTop = demo.scrollHeight+'px';function Marquee(){ /*向下的无缝循环滚动 if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } */ /*向下的无缝循环滚动 if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++}*//*向左的无缝循环滚动 if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}*//*向右的无缝循环滚动 if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}*/}var MyMar = setInterval(Marquee,speed);demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>
页:
[1]