您的位置：首页 > Web前端 > JavaScript

js实现文字列表无缝向上滚动

2017-09-26 11:04 671 查看

body{font-size:12px}
#demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
#demo1{height:auto; text-align:left;}
#demo2{height:auto; text-align:left;}
#demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left; }

html：
<body>
<div id="demo">
<ul id="demo1">
<li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
<li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
<li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
<li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
<li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
<li><a href="#" target="_blank">今天你写代码了吗</a></li>
<li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
</ul>
<div id="demo2"></div>
</div>
</body>

<script type="text/javascript">
var speed = 40;
window.onload=function(){
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML;
function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){
demo.scrollTop=0;
}
else{
demo.scrollTop=demo.scrollTop+1;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function(){clearInterval(MyMar)};
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed); };

}

</script>

setInterval(函数/方法，时间间隔)
每0.04s执行调用一次Marquee方法。
当鼠标over在文字上时，clearInterval停止该方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航