今天做项目遇到一个滚动的效果，本来打算用marquee做的，因为它是html自带的标签，写起来简单，但是有一个问题就是marquee不能实现无缝滚动，上网找了一些方法，发现marquee可以实现无缝，但要在脑残的IE环境下。
没办法，为了达到要求，自己又从网上找了一些相关的代码加以修改，最终实现了效果，现在把代码分享给大家，有问题还请大家多指正。
代码如下：
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字列表无缝向上滚动JavaScript代码</title> <style type="text/css"> #xunhuan{ overflow:hidden; /*溢出的部分不显示*/ height:100px; } #xunhuan1,#xunhuan2{height: auto;} </style> </head> <body> <div id="xunhuan"> <div id="xunhuan1"> <ul> <li>这是第1条</li> <li>这是第2条</li> <li>这是第3条</li> <li>这是第4条</li> <li>这是第5条</li> <li>这是第6条</li> </ul> </div> <div id="xunhuan2"></div> </div> <script> var speed=10; //数字越大速度越慢 var tab=document.getElementById("xunhuan"); var tab1=document.getElementById("xunhuan1"); var tab2=document.getElementById("xunhuan2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 </script> </body> </html> |
|
这里面需要注意的是，要加上我在style里面写的样式，另外两个注意点就是：里面的li不能float，最外围的xunhuan的高度要小于里面元素的高度，以足够它循环滚动。
例子是向上滚动的效果，如果想要向左滚动，做相应的改动即可。
时间： 2024-11-05 21:37:52