zoukankan html css js c++ java

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

二、无缝滚动

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

　　1、布局

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

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

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

 1 <style>
 2    #div1{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>

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

查看全文

相关阅读:
10 种保护 Spring Boot 应用的绝佳方法
 Redis 如何分析慢查询操作？
Spring Boot 主类及目录结构介绍
 Redis 再牛逼，也得设置密码！！
Spring Data Redis 详解及实战一文搞定
 Spring Boot Redis Cluster 实战干货
 超详细的 Redis Cluster 官方集群搭建指南
 Redis Linux 安装运行实战全记录
 hdu 4790 Just Random (思路+分类计算+数学)
poj 1328 Radar Installation（贪心）

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