js学习总结----小案例之跑马灯

Posted 2020-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习总结----小案例之跑马灯相关的知识，希望对你有一定的参考价值。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }
        #box{
            margin:50px auto;
            padding:0 10px;
            width:1000px;
            height:35px;
            line-height:35px;
            border:1px dashed green;
            background:lightgreen;
        }
        #box #wrap{
            height:35px;
            overflow:hidden;
            white-space:nowrap;
        }
        #box span{
            color:red;
            font-weight:bold;
            font-size:16px;
        }
        #wrap div{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <div id=‘wrap‘>
            <div id=‘conBegin‘>
                <span>通知：</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引
            </div>
            <div id=‘conEnd‘>
                <span>通知：</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引
            </div>
        </div>
        
    </div>

    <script>
        ~function(){
            var box = document.getElementById(‘box‘);
            var conBegin = document.getElementById(‘conBegin‘);
            var wrap = document.getElementById(‘wrap‘);
            var conBegin_width = getCss(conBegin,‘width‘);//之前封装好的获取css样式的方法
            var timer = window.setInterval(move,10)
            function move(){
                //优化前的代码
                // var curLeft = wrap.scrollLeft;
                // wrap.scrollLeft = curLeft +1;
                // var newLeft = wrap.scrollLeft;
                // if(curLeft == newLeft){
                // //利用了scrollLeft是存在最大值的思想，在累加1之前获取一个值，在累加之后获取一个值，如果两个值相等了，说明已经达到最大值了，所以清除定时器
                //     // window.clearInterval(timer)
                //     wrap.scrollLeft = 0//这样虽然从头开始了，但是会导致会闪烁一下。
                // }
                //优化后的代码  使用两个一样内容的div避免闪烁
                wrap.scrollLeft++;
                var curLeft = wrap.scrollLeft;
                if(wrap.scrollLeft >= conBegin_width){
                    wrap.scrollLeft = 0
                }
            }
            //鼠标划过停止
            box.onmouseover = function(){
                window.clearInterval(timer);
            }
            box.onmouseout = function(){
                timer = window.setInterval(move,10)
            }
        }()
        
    </script>
</body>
</html>

以上是关于js学习总结----小案例之跑马灯的主要内容，如果未能解决你的问题，请参考以下文章