【js】淘宝首页-淘宝头条文字滚动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .box{
            margin:100px auto;
            border:1px solid #ccc;
            width:170px;
            height:42px;
            line-height:20px;
            overflow:hidden;
        }
        .box .content{
            list-style-type:none;
            margin:0;padding:0;
            margin-left:6px;
        }
        /*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
        .box .content a{
            font-size:12px; 
            line-height:16px;
        }
    </style>
    </head>
    <body>
        <div class="box">
            <div id="transverseRoll">
                <div class="content">
                    <a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字一号</span></a> 
                    <a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字二号</span></a>
                </div>
                <div class="content">
                    <a href="http://www.zzjs.net/" target="_blank">
                        <span style="color:#3333FF">滚动文字三号</span>
                    </a>
                    <a href="http://www.zzjs.net/" target="_blank">
                        <span style="color:#3333FF">滚动文字四号</span>
                    </a>
                </div>
        </div>
        <script language="javascript">
            function startmarquee(lh,speed,delay) {//lh-高度，speed 时间，
                var bFlag = false;
                var timer = null;
                var _timer = null;
                var obj = document.getElementById("transverseRoll");//获取滚动元素
                obj.innerHTML += obj.innerHTML;//滚动元素的内容为2倍自己的内容
                console.log(obj.innerHTML);
                obj.style.marginTop = 0;
                obj.onmouseover=function(){ bFlag = true;}//鼠标移入
                obj.onmouseout=function(){ bFlag = false;}//鼠标移出
                function start(){
                    clearInterval(timer);
                    timer = setInterval(scrolling,speed);
                    if(!bFlag) obj.style.marginTop=parseInt(obj.style.marginTop) - 1 + "px";
                    console.log('setTimeout:',obj.style.marginTop);
                }
                function scrolling(){
                    if(parseInt(obj.style.marginTop) % lh != 0){  
                        obj.style.marginTop = parseInt(obj.style.marginTop) - 1 + "px";
                        console.log('scrolling??????', obj.style.marginTop );
                        //滚动物体的marginTop >=  它的滚动高度/2   比如   |-40| >= 80/2    →→→→→→→→→→      0 % 20 = 0
                        if(Math.abs(parseInt(obj.style.marginTop)) >= obj.scrollHeight / 2 ) obj.style.marginTop = 0;
                    }else{
                        clearInterval(timer);
                        clearTimeout(_timer);
                        setTimeout(start,delay);
                    }
                }
                clearTimeout(_timer);
                setTimeout(start,delay);
            }
            startmarquee(20,20,1500);
    </script>
    </body>
</html>
【js】淘宝首页-淘宝头条文字滚动效果

猜你喜欢
