javascript实现图片无缝滚动-------Day 27
2014-06-05 00:37
417 查看
今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额。
所谓“图片无缝滚动”,我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚动就是图片无缝滚动。
理解了定义,来简单了解下实现的基本原理:
将一个序列中的所有li进行复制,添加到现有的li后面,则每次滚动到露出尾部的时候,后面紧跟着的则是复制部分的头部部分,那么我们要问了,当后面运行到尾部的时候呢,难道要再进行赋值,答案当然不是,换个思路想,当原来部分的尾部全部露出的时候,也就是现有的总部分的一半的时候,我们观察此时页面的状态是不是就跟初始状态一样了,是的,完全一样,那么我们就可以根据css的设置,将显示部分返回初始状态,这样进行周而复始,就形成了无缝滚动的效果了。
说了那么多,还是上代码来的更明白:
1、写html部分
3、用javascript实现滚动
其实这个小应用中最大的收获有两个:1、容器,溢出隐藏;2、复制用以滚动,这两个比较新颖啊
不行了,实在困了,感冒要人命啊,睡觉去....
所谓“图片无缝滚动”,我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚动就是图片无缝滚动。
理解了定义,来简单了解下实现的基本原理:
将一个序列中的所有li进行复制,添加到现有的li后面,则每次滚动到露出尾部的时候,后面紧跟着的则是复制部分的头部部分,那么我们要问了,当后面运行到尾部的时候呢,难道要再进行赋值,答案当然不是,换个思路想,当原来部分的尾部全部露出的时候,也就是现有的总部分的一半的时候,我们观察此时页面的状态是不是就跟初始状态一样了,是的,完全一样,那么我们就可以根据css的设置,将显示部分返回初始状态,这样进行周而复始,就形成了无缝滚动的效果了。
说了那么多,还是上代码来的更明白:
1、写html部分
<span style="font-size:12px;"><div id="test"> <ul> <li><a href="#"><img src="img/0.jpg" width="300px" height="300px"></a></li> <li><a href="#"><img src="img/13.gif" width="300px" height="300px"></a></li> <li><a href="#"><img src="img/13.gif" width="300px" height="300px"></a></li> <li><a href="#"><img src="img/0.jpg" width="300px" height="300px"></a></li> </ul> </div></span>2、设置css样式,显示初始滚动前的样子
<span style="font-size:12px;"><style type="text/css"> *{margin: 0;padding: 0;} #test{position: relative;margin: 200px auto;padding: 0 30px 0 10px;width: 900px;height: 300px;background-color: cyan;overflow: hidden;} #test ul{position: absolute; list-style: none; margin: 10px 0 0 0; height: 160px;} #test ul li{float: left;list-style: none;margin: 0;height: 300px;} </style></span>这里有两个是非常重要的:1、ul的position必须是absolute的;2、容器,也就是div,的overflow:hidden,隐藏溢出部分;
3、用javascript实现滚动
<span style="font-size:12px;"><script type="text/javascript"> window.onload=function(){ var a=document.getElementById("test").getElementsByTagName("ul")[0]; var b=document.getElementById("test").getElementsByTagName("li"); a.innerHTML += a.innerHTML;//这个地方实现复制 a.style.width = (b[0].offsetWidth+10) * b.length + "px";//复制后ul的宽度加倍 var speed = -1; var timer; //这里定义一个滚动方法 var scroll = function(){ timer = setInterval(function () { a.style.left =a.offsetLeft+speed+ "px"; if (a.offsetLeft <= -a.offsetWidth/2) { a.style.left = 0; } else if (a.offsetLeft >= 0) { a.style.left = -a.offsetWidth/2 + "px"; } }, 30); }; scroll();//运行滚动的方法 }; </script></span>定义方法之后,一定要运行才有效,所以scroll()一定不要漏掉;另外,看到这里style.left的设置,知道ul为什么一定要用absolute了吧;定时器还是很好用啊,给力。
其实这个小应用中最大的收获有两个:1、容器,溢出隐藏;2、复制用以滚动,这两个比较新颖啊
不行了,实在困了,感冒要人命啊,睡觉去....
相关文章推荐
- Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)
- html使用javascript实现图片滚动无缝拼接
- Javascript实现图片无缝滚动
- 利用javascript的setInterval()函数实现的图片无缝滚动
- javascript实现多张图片左右无缝滚动效果
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
- 原生javascript实现图片无缝滚动效果
- javascript实现图片无缝滚动(scrollLeft的用法介绍)
- javascript实现图片无缝滚动
- Javascript 实现图片无缝滚动
- 原生javascript实现图片无缝滚动效果
- JavaScript实现简单精致的图片左右无缝滚动效果
- JavaScript实现图片无缝滚动效果
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
- 使用Javascript简单实现图片无缝滚动
- JavaScript实现一个最基本的图片无缝横向滚动效果
- Javascript实现 图片的无缝滚动
- Javascript 实现图片无缝滚动
- 使用Javascript简单实现图片无缝滚动
- 用div实现向左右无缝滚动图片效果