《JavaScript学习笔记十》:无缝滚动的实现

《JavaScript学习笔记十》:无缝滚动的实现

无缝滚动在很多网页上面都有这样一个功能,用于动态的显示一些图片信息。
本篇博文就是模拟这样一个功能的实现,所设计的知识点为:根据offsetLeft动态的获取位置更改控件的left的值来使得控件移动。

先看如下的简单的例子,一个Div控件不断向右移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style> #div1 {width:200px;height:100px;position:absolute;background:red;left:70px;top:30px;margin:100px} </style>

    <script> window.onload=function() { setInterval(function() { var oDiv = document.getElementById('div1'); oDiv.style.left=oDiv.offsetLeft+10+'px'; },1000); }; </script>
    </head>

    <body>
    <div id="div1">
    </div>
    </body>
    </html>

有了上面的基础,就来看看无缝滚动的具体实现的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style> * {margin:0; padding:0;} #div1 {width:712px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;} #div1 ul {position:absolute; left:0; top:0;} #div1 ul li {float:left; width:178px; height:108px; list-style:none;} </style>
    <script> window.onload=function() { var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var oLi=oUl.getElementsByTagName('li'); oUl.innerHTML+=oUl.innerHTML; //用两倍来进行移动 oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';//不能用:oLi[0].style.width var timer; var dis=2; function move() { //alert(oUl.offsetLeft); //alert(oUl.offsetWidth); if(oUl.offsetLeft<-oUl.offsetWidth/2)//即当向左滚动出去一半的时候,就立即将ul放在起点位置 { oUl.style.left='0px'; } if(oUl.offsetLeft>0)//即当向右滚动出去一半的时候,就立即将ul放在起点位置 { oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+dis+'px';//由于ul为绝对定位,可以由width/height等来决定 } timer=setInterval(move,100); //当我们鼠标移动到div上面时,就应该停止 oDiv.onmouseover=function() { clearInterval(timer); }; oDiv.onmouseout=function() { timer=setInterval(move,100); }; var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); btn1.onclick=function() { dis=-2; }; btn2.onclick=function() { dis=2; }; }; </script>
    </head>

    <body>
    <input id="btn1" type="button" value="向左滚动" />
    <input id="btn2" type="button" value="向右滚动" />
    <div id="div1">
        <ul><!--每个图片大小为:178*108px -->
            <li><img src="img2/1.jpg" /></li>
            <li><img src="img2/2.jpg" /></li>
            <li><img src="img2/3.jpg" /></li>
            <li><img src="img2/4.jpg" /></li>
        </ul>

    </div>
    </body>
    </html>

从上面的代码可以看出,稍微有点复杂,需要我们仔细的分析,由于代码注释写的比较清楚,这里就不再解释,如果一遍没有看懂,可以多看几遍。

以上就是关于JavaScript的无缝滚动的实现。

参考资料

1、blue老师的《js视频教程》

你可能感兴趣的:(JavaScript,html,移动,无缝滚动)