js无缝滚动原理及详解[转自刹那芳华]

刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后,自己写一个滚动效果不会是什么难题了.
    本文以CSS+div+js为例,详细说明无缝滚动实现原理.
    首先建立四个层(div).

结构如下:

id="a"(以下简称a,id="b"简称为b)为轮播的可视部分,b为轮播部分,b_1为轮播内容,但b_2和b_1要在同一行上,因为轮播的原理就是利用scrollLeft不断累加的方式实现,当b_2滚动完的时候,从b_1开始继续滚动。

下面介绍一下代码里(代码可以在网上找,也可以用本文的代码。)的各种参数的意思:
    其实每个代码都大同小易
    <script type="text/javascript" language="javascript">

var x=document.getElementById("a");
     //自定义变量x,getElementById是通过id获取对象。你可以理解为:将document.getElementById("a")
     //这段代码缩写为x了。这里的x你可以随便换。在这里不定义x也行不过后面的代码会麻烦点。

var y=document.getElementByIdx_x("b_1");
    var z=document.getElementByIdx_x("b_2");
        function test() {
        //自定义函数test,test可以随便换,值为空。

if (x.scrollLeft>=z.offsetWidth)
         //如果,x的scrollLeft值大于等于z的offsetWidth。
         //scrollLeft的值也就是scrollbar移动的值,
         如图:
           
         //offsetWidth是对象可视宽度。也就是z包括边框在内的宽度,因为y和z的宽度是一样的
         //所以,你这里可以把z改成y,或者直接改成z的宽度效果是一样的

x.scrollLeft-=y.offsetWidth;
            //scrollLeft:代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度,x的scrollLeft值等于x的scrollLeft值减去y的offsetWidth值。
            //其实当y完全滚动完成的时候,x的scrollLeft值和y的offsetWidth值是相等的。
            //所以这段代码意思就是x.scrollLeft=0 。
            //这里y.offsetWidth你可以换成z.offserWidth或者y的宽度值,如果换成零,去掉减号。
            //看到这里你也许会有点明白了吧?无缝滚动,其实就是不断重复滚动第一个层.
            //当b_1滚动的时候,如果没有"双胞胎"的b_2,滚动的时候将显示一个b_1宽的空白
            //所以,如果没有overflow:hidden属性的话,滚动跟下面这张图是一样的
                   

else{
        //否则

x.scrollLeft++;
            //x的scrollLeft值累加,实现移动

}
        }

var run = setInterval(test,1);
    //自定义run,setInter是在规定的时间内重复调用函数,直到用clearInterval终止
    //这句代码的意思是,每1毫秒执行一次test,每隔1毫秒x的scrollLeft值加1
    //所以数值越大滚动越慢

x.onmouseover=function() {clearInterval(run)};
    //当鼠标划过x的时候,终止run。滚动停止

x.onmouseout=function() {run=setInterval(test,1)};
    //当鼠标离开x,继续执行test,时间为1毫秒。

</script>

注:<div class="b_1">和<div class="b_2">要有 "float:left;"属性,宽和高可以根据内容自定。<div id="b">的宽度要大于<div id="a">否则将不能滚动。

时间: 2024-11-06 21:06:46

js无缝滚动原理及详解[转自刹那芳华]的相关文章

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

javascript无缝滚动原理

相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即可. 源码: <!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF-8"> <title>demo</title> <st

Node.js开发入门—Stream用法详解

Stream是Node.js中非常重要的一个模块,应用广泛.一个流是一个具备了可读.可写或既可读又可写能力的接口,通过这些接口,我们可以和磁盘文件.套接字.HTTP请求来交互,实现数据从一个地方流动到另一个地方的功能. 所有的流都实现了EventEmitter的接口,具备事件能力,通过发射事件来反馈流的状态.比如有错误发生时会发射"error"事件,有数据可被读取时发射"data"事件.这样我们就可以注册监听器来处理某个事件,达到我们的目的. Node.js定义了R

LVS-DR工作原理图文详解

为了阐述方便,我根据官方原理图另外制作了一幅图,如下图所示:VS/DR的体系结构: 我将结合这幅原理图及具体的实例来讲解一下LVS-DR的原理,包括数据包.数据帧的走向和转换过程. 官方的原理说明:Director接收用户的请求,然后根据负载均衡算法选取一台realserver,将包转发过去,最后由realserver直接回复给用户. 实例场景设备清单: 说明:我这里为了方便,client是与vip同一网段的机器.如果是外部的用户访问,将client替换成gateway即可,因为IP包头是不变的

MapReduce工作原理图文详解 (炼数成金)

MapReduce工作原理图文详解 1.Map-Reduce 工作机制剖析图: 1.首先,第一步,我们先编写好我们的map-reduce程序,然后在一个client 节点里面进行提交.(一般来说可以在Hadoop集群里里面的任意一个节点进行,只要该节点装了Hadoop并且连入了Hadoop集群) 2.job client 在收到这个请求以后呢,会找到JobTracker并且请求一个作业ID(Job ID).(根据我们的核心配置文件,可以很轻易的找到JobTracker) 3.通过HDFS 系统把

ln命令总结,软链接&硬链接&文件删除原理画图详解

ln命令总结,软链接&硬链接&文件删除原理画图详解