js图片文字无缝滚动

今天记录又一个小特效。上次写了个轮播图，

思路是一个图片列表滚动，滚动到一定距离，把图片列表的第一张图片添加到最后一张。

这次是图片文字无缝滚动。也弥补了marquee不能无缝滚动不足。

html如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无缝滚动</title>
   
</head>
<body>

<div id="gd">
    <div id="gdbox">
        <div id="box1">
            星星之所以美丽，是因为它的某一颗上有一朵看不见的花。沙漠之所以美丽，是因为它的某一个地方藏着一口井。丽家园！
        </div>
        <div id="box2"></div>
    </div>
</div>
</body>
</html>

　　css:

 

 <style>

        #gd{width:700px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;border: 1px solid #ccc}//此处一定要加溢出隐藏。
        #gdbox{float:left; width: 1000%;height:100px}//滚动列表要大于父盒子。
        #box1,#box2{float:left;}

    </style>

　　JavaScript：

<script>
    window.onload=function(){
        var speed=20;
        var tab=document.getElementById("gd");//特别注意这个是获取最外面一层的盒子，就是溢出隐藏的盒子。
        var tab1=document.getElementById("box1");
        var tab2=document.getElementById("box2");
        tab2.innerHTML=tab1.innerHTML; //通过赋值获得tab1的值。内容相当于一份
        function marquee(){
            if(tab2.offsetWidth-tab.scrollLeft<=0)//当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动
            {tab.scrollLeft=0}
            else
            {tab.scrollLeft++;//盒子每次向左边移动一个像素。

            }
        }
        var timer=setInterval(marquee,speed); //定时器
        tab.onmouseover=function(){clearInterval(timer)};
        tab.onmouseout=function(){timer=setInterval(marquee,speed);}
    }
</script>

　　懒癌又犯了，下次有空再学点别的内容，再更新一下博客

posted @ 2017-09-08 17:05  吃土攻略  阅读(242)  评论(0)    收藏  举报