频道导航

JS平滑无缝滚动效果的实现代码

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了JS平滑无缝滚动效果的实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文我们实现纯JS方式的滚动广告效果。

先show一下成品：

首先是网页样式：

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 1280px;

height:200px;

}

demo img {

border: 3px solid #F2F2F2;

}

indemo {

float: left;

width: 800%;

}

demo1 {

float: left;

}

demo2 {

float: left;

}

布局如下：

具体的JS实现：

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft==0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

var MyMar=setInterval(Marquee,speed);

tab.onmouSEOver=function() {clearInterval(MyMar)};

tab.onmouSEOut=function() {MyMar=setInterval

(Marquee,speed)};

这里要注意的是：

scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度。

offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

明白了这个具体的实现就好理解了。

实现的原理是这样的：首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来，这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动，实现影藏。其中有一点需要注意的是，由于这里是将两张图片同时放入左侧，当右侧显示了一半时会将左侧影藏的完全显示出来，又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。