js跑马灯

最新推荐文章于 2025-09-12 15:58:40 发布

weixin_33940102

最新推荐文章于 2025-09-12 15:58:40 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3538113/blog/1335141

2019独角兽企业重金招聘Python工程师标准>>>

需要注意的是这里需要给获取的id所在div进行定位（position:relative;）给ul进行相对定位（position:absolute;）才能让left属性滚动起来

此例为向左，其他方向将left改为top或-=改为+=之类即可。速度为0.1跑的相对顺眼，调高了有点辣眼睛。。

<script>

//获取元素
 var ooo=document.getElementById("demo");
 var oUl=ooo.getElementsByTagName("ul")[0];
 var lis=oUl.getElementsByTagName("li");

//循环赋值
 oUl.innerHTML+=oUl.innerHTML;
 oUl.style.width=lis.length*lis[0].offsetWidth+'px';
 var left=null;//初始像素
 var speed=0.1;//初始速度
 oUl.onmouseover = function(){
 speed=0;
 }    //鼠标经过时清除速度达到滚动停止的目的 
 oUl.onmouseout = function(){
 speed=0.1;
 }    //鼠标移开时重设速度 
 var timer=setInterval(function(){
 left-=speed;
 if(left<-oUl.offsetWidth/2){
 left=0;
 }
 oUl.style.left=left+'px'
 },5)
</script>

转载于:https://my.oschina.net/u/3538113/blog/1335141