关闭

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

标签: javascripthtml移动无缝滚动
266人阅读 评论(0) 收藏 举报
分类:

《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视频教程》

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:520464次
    • 积分:11291
    • 等级:
    • 排名:第1519名
    • 原创:605篇
    • 转载:14篇
    • 译文:0篇
    • 评论:96条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论