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

Posted zzjeny

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016年5月25日下午（妙味课堂js预热课程-4笔记二）相关的知识，希望对你有一定的参考价值。

二、无缝滚动

　　   

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

　　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笔记二）的主要内容，如果未能解决你的问题，请参考以下文章

妙味js预热课程

2016年5月27日下午（妙味课堂js基础-3笔记三（事件））

2016年5月27日下午（妙味课堂js基础-3笔记二（事件））

2016年5月27日上午（妙味课堂js基础-3笔记一（事件））

妙味js预热课程

4月25日下午学习日志