js无缝滚动原理及详解[转自刹那芳华]
2015-09-11 15:27
330 查看
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后,自己写一个滚动效果不会是什么难题了.
本文以CSS+div+js为例,详细说明无缝滚动实现原理.
首先建立四个层(div).
结构如下:
id="a"(以下简称a,id="b"简称为b)为轮播的可视部分,b为轮播部分,b_1为轮播内容,但b_2和b_1要在同一行上,因为轮播的原理就是利用scrollLeft不断累加的方式实现,当b_2滚动完的时候,从b_1开始继续滚动。
下面介绍一下代码里(代码可以在网上找,也可以用本文的代码。)的各种参数的意思:
其实每个代码都大同小易
注:<div class="b_1">和<div class="b_2">要有 "float:left;"属性,宽和高可以根据内容自定。<div id="b">的宽度要大于<div id="a">否则将不能滚动。
本文以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宽的空白 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">否则将不能滚动。
相关文章推荐
- wechat JS-SKD (getLoaction) 定位显示百度map
- solr查询返回JSON格式
- javascript函数提升
- JS 去字符串空格
- javascript函数定义
- 知识点摸清 - - function()——JavaScript 函数名后什么时候加括号,什么时候不
- js面向对象的学习笔记九(BOM 与 DOM 经常使用的属性分析)
- javascript:void(0)含义
- js判断字符在另一个字符串中出现次数
- js比量undefined种类
- js判断一个字符串是否在另一个字符串中存在 indexOf
- JS 之DOM对象(2)
- 【转载】JS实现弹性菜单效果
- js里function前面加!
- JS 之DOM range对象
- 写出高效率的正则表达式技巧总结
- EJS 模板快速入门
- javascript JSON
- ExtJs—Grid多选框中勾选与单击事件的冲突
- JavaScript 位运算总结&拾遗