2016年5月25日下午（妙味课堂js预热课程-4笔记二）

时间：2016-05-25 21:58:45 阅读：210 评论：0 收藏：0 [点我收藏+]

标签：

二、无缝滚动

　　技术分享

如上图所示，现在很多网页都会实现这样的效果；它是如何实现的呢？

　　1、布局

　　　　注意如果想让一个div的位置发生改变，则最好给这个div加上一个绝对定位：position：absolute；

　　　　obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

　　（1）这里插入一个小程序，即如何让Div移动起来：代码如下；

 1 <style>
 2    #div1{width:100px;height:100px;background:#ccc;position:absolute;left:0;}
 3    </style>
 4     <script type="text/javascript">
 5         window.onload=function () {
 6             var oDiv=document.getElementById("div1");
 7             var oBtn=document.getElementById("btn1");
 8 
 9             oBtn.onclick=function () {
10                 oDiv.style.left=oDiv.offsetLeft+5+"px";
11             };
12         };
13     </script>
14 </head>
15 <body>
16     <input id="btn1" type="button" value="向右移动" />
17    <div id="div1"></div>
18 </body>

　　显示效果如下：当点击按钮时，下面的矩形块会向右移动；

技术分享

现在我们来加功能即加一个定时器可以点击按钮时就让矩形块自动向右移动，点击停止移动时矩形就停止移动；代码如下；

<script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("div1");
            var oBtn1=document.getElementById("btn1");
            var oBtn2=document.getElementById("btn2");
            var timer=null;

            oBtn1.onclick=function () {
                timer=setInterval(function () {
                    oDiv.style.left=oDiv.offsetLeft+5+"px";
                },30);
            };
            oBtn2.onclick=function () {
                clearInterval(timer);
            };
        };
    </script>

　　（2）无缝滚动的布局

　　首先用html以及css布局如下：

技术分享

　　接下来要让其图片滚动起来即用js添加事件：代码如下；

<script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("roll");
            var oUl=oDiv.document.getElementsByTagName("ul")[0];
            var aLi=document.getElementsByTagName("li");
            
            oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

            setInterval(function () {
                    oUl.style.left=oUl.offsetLeft+1+"px";
                },30);
        }
    </script>

　　2、offset

　　总共有四种：offsetLeft：左边距

　　　　　　　　offsetTop：上边距

　　　　　　　　offstWidth：宽度

　　　　　　　　offsetHeight：高度

技术分享

　　如图所示当图片一直往左边滚动的时候后面图片为空白，不会接着图片过来，这是什么情况呢？没有达到无缝的情况;要实现其代码为：

<script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("roll");
            var oUl=oDiv.document.getElementsByTagName("ul")[0];
            var aLi=document.getElementsByTagName("li");
            var iSpeed=5;

            oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

            setInterval(function () {
                    oUl.style.left=oUl.offsetLeft-iSpeed+"px";
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left="0px";
                }
                },30);
        }
    </script>

　　然后当鼠标移入的时候我们要改变两边速度的方向；其代码为：

<script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("roll");
            var oUl=oDiv.document.getElementsByTagName("ul")[0];
            var aLi=document.getElementsByTagName("li");
            var aBtn=document.getElementsByTagName("a");
            var iSpeed=-5;

            oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

            setInterval(function () {
                    oUl.style.left=oUl.offsetLeft+iSpeed+"px";
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left="0px";
                }
                else if (oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2;
                }
                },30);
            aBtn[0].onmousemove=function () {
                iSpeed=-5;
            };
            aBtn[1].onmouseover=function () {
                iSpeed=5
            }
        }
    </script>

　　　因此从上面代码可知：要改变滚动方向需要注意两点：

　　　　　　1、修改iSpeed

　　　　　　2、修改判断条件

　　（3）鼠标移入暂停

　　　　1、鼠标移入关闭定时器；

　　　　2、移出重新开启定时器。

<script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById("roll");
            var oUl=oDiv.document.getElementsByTagName("ul")[0];
            var aLi=document.getElementsByTagName("li");
            var aBtn=document.getElementsByTagName("a");
            var iSpeed=-5;
            var timer=null;

            oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
            timer=setInterval(function () {
                    oUl.style.left=oUl.offsetLeft+iSpeed+"px";
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left="0px";
                }
                else if (oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2;
                }
                },30);
            aBtn[0].onmousemove=function () {
                iSpeed=-5;
            };
            aBtn[1].onmouseover=function () {
                iSpeed=5
            };
            oUl.onmouseover=function () {
                clearInterval(timer);
            };
            oUl.onmouseout=function () {
                clearInterval(timer);
            };
        }
    </script>

　　具体细节还要自己再实践才行！！！

2016年5月25日下午（妙味课堂js预热课程-4笔记二）

标签：

原文地址：http://www.cnblogs.com/zzjeny/p/5528335.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行