Chinaunix首页 | 论坛 | 博客

zhanfeng0102的ChinaUnix博客zhanfeng.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zhanfeng0102

  • 博客访问： 47713
  • 博文数量： 34
  • 博客积分： 831
  • 博客等级： 军士长
  • 技术积分： 310
  • 用 户 组： 普通用户
  • 注册时间： 2012-10-08 11:15
文章分类

全部博文（34）

文章存档

2012年（34）

我的朋友
最近访客
推荐博文
相关博文
JS图片无缝滚动

分类： 系统运维

2012-10-08 16:56:30

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

JS图片无缝滚动就是html中内容超出出现下拉框自动拖拉下拉框版本。不知道该怎么怎么描述。

刚听完孙老师讲之后，感觉不是很难，但是真正让自己写的时候感觉会有好多问题，发现里面的很多东西没有讲出来，嘿嘿……跟李老师差距还是有点大哦！！

中午吃完饭回来之后，自己认真的想想，并动手实验了一下，终于明白那几条简短代码的含义了。实现图片无缝滚动的思想：当滚动条到终点的时候让它自动回到起点再次拖动它到终点。如何实现这个方法就要加一条IF语句做出判断。只要滚动的距离scrollLeft大于显示框的距离就让滚动的距离scrollLeft自动清0，否则就scrollLeft++。代码如下：


点击(此处)折叠或打开

  1. 　　<body>
  2. 　　    <div id="demo" class="outer">
  3. 　　        <div id="in1" class="in">
  4. 　　            <div id="demo1" class="demo1">
  5. 　　                <img src="a1.jpg" alt="" />
  6. 　　                <img src="a2.jpg" alt="" />
  7. 　　                <img src="a3.jpg" alt="" />
  8. 　　                <img src="a4.jpg" alt="" />
  9. 　　                <img src="a5.jpg" alt="" />    
  10. 　　            </div>
  11. 　　            <div id="demo2" class="">&nbsp;</div>
  12. 　　        </div>
  13. 　　    </div>
  14. 　　<script type="text/javascript">
  15. 　　        var demo=document.getElementById("demo");
  16. 　　        var demo1=document.getElementById("demo1");
  17. 　　        var demo2 = document.getElementById("demo2");
  18. 　　        var in1 = document.getElementById("in1");
  19. 　　        demo2.innerHTML = demo1.innerHTML;    
  20. 　　        function move(){
  21. 　　            
  22. 　　            if(demo.offsetWidth<=demo.scrollLeft){
  23. 　　                
  24. 　　                demo.scrollLeft=0;
  25. 　　                
  26. 　　            }
  27. 　　            else{
  28. 　　                //alert(demo.scrollLeft);
  29. 　　                demo.scrollLeft++;
  30. 　　            }
  31. 　　        }
  32. 　　        var bb=setInterval("move()",10);
  33. 　　        demo.onmouseover = function(){clearInterval(bb);}
  34. 　　        demo.onmouseout = function(){bb=setInterval("move()",10)}
  35. 　　    </script>
  36. 　　</body>
MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

说几个比较难理解的地方吧：

1.为什么子标签要是父标签的两倍以上的宽度：

当子标签的宽度小于父标签的宽度的两倍以上，就会使demo.scrollLeft到某一个小于demo.offsetWidth数值停止不动了。假设子标签的宽度是1000，当demo.scrollLeft为452的时候，demo.scrollLeft+显示的宽度552+边框的宽度=1000，所以demo.scrollLeft无法++了，但这个时候demo.offsetWidth<=demo.scrollLeft不成立，所以demo.scrollLeft无法清0.所以要是它的两倍以上

2.为什么要3div嵌套：如果两个div嵌套会出现一片空白区域，然后直接从第一个开始再次循环，不能第一个出去最后一个变为第一个了，这是因为demo1的宽度是1200，但是outer的宽度却才是550，所以它要一直循环到1100左右才会清0，这个时候三层嵌套就相当于第三层的内容demo1和demo2（demo1和demo2完全的一样）平铺在第二层上。

3.demo.offsetWidth相当于你需要让它滚动的宽度，而demo.scrollLeft相当于是你实际让它滚动的距离，这就好比汽车里程表，demo.offsetWidth只能跑的里程表，而demo.scrollLeft是你现在已经跑了的里程数

scrollLeft   和   scrollTop   对应滚动条的位置 无缝滚动.rar  


阅读(320) | 评论(0) | 转发(0) |
0

上一篇：Tab切换5种方法

下一篇：碰壁反弹

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6