|
阅读：3894回复：0
原生js实现文字无缝滚动，速度可自行定义，鼠标放入悬停 good
先了解 位置属性：
style.top：设置或返回定位元素的顶部位置 style.left：设置或返回定位元素的左边位置 offsetWidth：自己的的宽度，无单位。 style.width只能得到行内样式设置的宽度 offsetHeight：自己的的高度 offsetTop：距离上一个盒子的顶部的距离 offsetLeft：距离上一个盒子的左边距离 scrollTop：滚动条顶部滚动的像素 scrollLeft：滚动条左边滚动的像素 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字无缝滚动</title> <style> *{ margin: 0; padding: 0 } #wrapper{ overflow:hidden; height:100px; width:500px; background:#ccc; color:#006600; margin: 100px auto; text-align: center; } </style> </head> <body> <div id="wrapper"> <div id="demo1"> <p>恭喜 手机号为11111****5610 的用户喜获 100元 现金券</p> <p>恭喜 手机号为22222****5611 的用户喜获 100元 现金券</p> <p>恭喜 手机号为33333****5612 的用户喜获 100元 现金券</p> <p>恭喜 手机号为44444****5613 的用户喜获 100元 现金券</p> </div> <div id="demo2"> </div> </div> </body> </html> <script> var speed = 80; // 可自行设置文字滚动的速度 var wrapper = document.getElementById('wrapper'); var demo1 = document.getElementById('demo1'); var demo2 = document.getElementById('demo2'); demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-wrapper.scrollTop<=0) //当滚动至demo1与demo2交界时 wrapper.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ wrapper.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left } } var MyMar=setInterval(Marquee,speed) //设置定时器 wrapper.onmouseover=function() {clearInterval(MyMar)} //鼠标移上时清除定时器达到滚动停止的目的 wrapper.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //鼠标移开时重设定时器 </script> |
|
