欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

完美简单js文字左右无缝滚动

(元素模板) / 2022-09-13 15:42
完美的纯js无缝左右文字滚动,自适应宽度,废话不多说,直接上代码,
<div id="slider">
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</div>
<script>
var box = document.getElementById("slider");
var ul = box.getElementsByTagName("ul")[0];//获取ul
    var lis = ul.getElementsByTagName("li");//获取所有的li元素
    var speed = 2;//速度
    ul.innerHTML += ul.innerHTML;//相当于克隆
    ul.style.width = lis.length*lis[0].offsetWidth+'px';//计算赋值ul的宽度
    //滚动方法
   function move (){
       // 如果当前left值 <= 负ul/2的宽度 给left值重新定位成0
       if(ul.offsetLeft<=-ul.offsetWidth/2){
            ul.style.left = "0";
         }
       //像左边滚动
        ul.style.left = ul.offsetLeft - speed + 'px';
    }
    //定时器
     var timer = setInterval(move,30);
     //鼠标经过控制暂停滚动
     box.onmouseover = function () {
       clearInterval(timer);
     }
    box.onmouseout = function () {
     timer = setInterval(move,30);
   }
</script>

Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com