js无间隙滚动

最新推荐文章于 2017-11-03 15:14:00 发布

weixin_30412013

最新推荐文章于 2017-11-03 15:14:00 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wesky/p/3268354.html

本文介绍了三种使用JavaScript实现的文字滚动效果代码示例。通过创建两个相同的内容元素并利用定时器进行位置更新，使得文本能在页面中平滑滚动。此外，还实现了鼠标悬停时暂停滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码一：

var speed=50; //设置文字滚动速度
dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
function Marquee(){
if(dome2.offsetTop-dome.scrollTop<=0) //当滚动至dome1与dome2交界时
dome.scrollTop-=dome1.offsetHeight //dome跳到最顶端
else{
dome.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器
dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动

代码二：

var speed = 50;
var demo = document.getElementById("demo");
var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML;

function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至dome1与dome2交界时
        demo2.scrollTop-=demo1.offsetHeight //dome跳到最顶端
    else{
        demo.scrollTop++
    }
}
var MyMar=setInterval(Marquee,speed) //设置定时器
demo.onmouseover=function() {clearInterval(MyMar);;}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动