关闭

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

标签: javascripthtml移动无缝滚动
369人阅读 评论(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
查看评论

原生Js无缝滚动效果的简单实现

前言: 1.仍然是比较简单的内容,从简单开始慢慢加深自己的js水平。 2.无缝滚动,前提条件是子box的高度要大于父box的高度,这样才有必要去滚动,否则直接展示就可以了。 3.增添了鼠标移入停止和移出继续滚动的效果。 4.在小结部分会总结一些过程中遇到的疑问,还望各位不啬赐教,拜谢。 代码如下...
  • my_coding2015
  • my_coding2015
  • 2016-08-05 23:12
  • 2052

纯javascript实现广告的无缝滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 广告的无缝滚动 *{margin...
  • xuzengqiang2
  • xuzengqiang2
  • 2014-03-10 17:01
  • 756

图片无缝滚动的原理和实例

无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%; 原理:第一个盒子相对浮动,第二个盒子绝对浮动,让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候,让left值瞬间归0,用户...
  • stopcpp
  • stopcpp
  • 2016-10-12 10:55
  • 2746

10行原生JS实现文字无缝滚动

废话不多说,直接上代码 aaaaaaaaa bbbbbbbbbbbbbb ccccccccccc ddddddddddddddd aaaaaaaaaaaaaa body,#app{ margin: 0; padding: 0...
  • itKingOne
  • itKingOne
  • 2017-09-06 14:48
  • 1035

jQuery实现图片无缝滚动

HTML代码: CSS代码: *{ margin: 0;padding: 0; } .box{ width: 1235px;height: 358px; ...
  • qq_35051603
  • qq_35051603
  • 2017-12-26 10:26
  • 60

js向右无缝滚动

向右无缝滚动javascript demo 向右的:           http://www.baidu.com/img/logo.gif" >  http://www.baidu.com/i...
  • yztezhl
  • yztezhl
  • 2013-07-31 17:11
  • 857

原生js实现无缝滚动

水平方向无缝滚动滚动支持图片,文字 HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> ...
  • qq_26499247
  • qq_26499247
  • 2017-01-10 15:55
  • 2109

实现无缝滚动与间歇性无缝滚动

这篇blog是使用html与js实现无缝滚动与间歇性无缝滚动,首先,先看一下效果图:     这种效果,在网站中经常见到,下面,我们实现这个效果。首先,这里有以下知识点:setInterval("表达式",周期时间); ...
  • wangchaohx
  • wangchaohx
  • 2017-02-06 17:16
  • 1179

JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动

1 一 2 二 3 三 5 四 6 五 4 六 <!-- var demo = document.getElementById("demo"); var demo1 = document.getElementB...
  • leiyonglin
  • leiyonglin
  • 2011-08-19 18:00
  • 8496

jQuery实现轮播图的无缝滚动

之前在学习jQuery时,想做一个轮播图的demo,于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo,但是在演示的时候,最后一张到第一张图片切换到时候没有动画效果。之后尝试在最后多添加一个第一张图片,然后在展示这章图片时,默默的把其换成了真正的第一张图片,...
  • u010594453
  • u010594453
  • 2015-09-02 13:08
  • 3955
    个人资料
    • 访问:705678次
    • 积分:12731
    • 等级:
    • 排名:第1304名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:115条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论