JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
来源:互联网 发布:拳皇网络对战 编辑:程序博客网 时间:2024/05/01 14:26
本文我们实现纯JS方式的滚动广告效果。
先show一下成品:
首先是网页样式:
1. #demo {
2. background: #FFF;
3. overflow:hidden;
4. border: 1px dashed #CCC;
5. width: 1280px;
6. height:200px;
7. }
8. #demo img {
9. border: 3px solid #F2F2F2;
10. }
11. #indemo {
12. float: left;
13. width: 800%;
14. }
15. #demo1 {
16. float: left;
17. }
18. #demo2 {
19. float: left;
20. }
布局如下:
1. <div id="demo">
2. <div id="indemo">
3. <div id="demo1">
4. <a href="#"><img src="banner.jpg" border="0" /></a>
5. <a href="#"><img src="banner2.jpg" border="0" /></a>
6. </div>
7. <div id="demo2"></div>
8. </div>
9. </div>
具体的JS实现:
1. <script>
2. var speed=10;
3. var tab=document.getElementById("demo");
4. var tab1=document.getElementById("demo1");
5. var tab2=document.getElementById("demo2");
6. tab2.innerHTML=tab1.innerHTML;
7. function Marquee(){
8. if(tab2.offsetWidth-tab.scrollLeft==0)
9. tab.scrollLeft-=tab1.offsetWidth
10. else{
11. tab.scrollLeft++;
12. }
13. }
14. var MyMar=setInterval(Marquee,speed);
15. tab.onmouseover=function() {clearInterval(MyMar)};
16. tab.onmouseout=function() {MyMar=setInterval
17. (Marquee,speed)};
18. </script>
这里要注意的是:
scrollLeft代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
明白了这个具体的实现就好理解了。
实现的原理是这样的:首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来,这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动,实现影藏。其中有一点需要注意的是,由于这里是将两张图片同时放入左侧,当右侧显示了一半时会将左侧影藏的完全显示出来,又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
谢谢支持!
可以联系我进行交流。Renhanlinbsl@163.com
2016.2.5
4:55
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- js实现无缝滚动效果
- JS图片滚动(无缝、平滑、上下左右滚动)效果
- 无缝滚动效果 js可以实现
- JS实现图片无缝滚动效果
- js实现无缝滚动
- JS实现无缝滚动
- js实现无缝滚动
- 轻松实现内容的无缝平滑滚动
- 轻松实现内容的无缝平滑滚动
- JS图片滚动代码(无缝、平滑)
- JS图片滚动代码(无缝、平滑)
- JS图片滚动代码(无缝、平滑)
- JS图片滚动代码(无缝、平滑)
- JS图片滚动代码(无缝、平滑)
- JS图片滚动代码(无缝、平滑)
- C语言删除指定文件
- uri url urn
- 兼容IE-FireFox-Chrome的背景音乐播放
- 网络知识
- C语言ODBC数据库操作
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
- Ping命令的另一种使用方法
- JS创建事件的三种方式(实例)
- 安装wamp提示You dont't have permission to accesson on this server的解决方案
- 安裝CentOS7后修復win7引导
- POJ 2049 Finding Nemo(广搜+优先队列)
- 创建不死目录、不死文件
- 创建完全的隐藏用户
- PHP MySql增删改查