跑马灯效果 (支持滑入暂停)

发布于 2020-08-09  150 次阅读 本文共1968个字


跑马灯效果
周星驰 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。 如果非要在这份爱上加上一个期限,我希望是…… 一万年
周星驰 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。 如果非要在这份爱上加上一个期限,我希望是…… 一万年

本demo源码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        #wrap {
            width: 800px;
            margin: 20px auto;
            border: 1px dashed #EE9CA7;
            white-space: nowrap;
            overflow: hidden;
            padding: 10px;
            color: rgb(243, 129, 196);
            background: #eee;
        }

        #wrap div {
            display: inline-block;
            font-size: 20px;
        }

        #wrap span {
            font-size: 20px;
            color: rgb(207, 65, 243);
        }


    </style>
</head>
<body>
<div id="wrap">
    <div id="first">
        <span>周星驰</span>   曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 
如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
如果非要在这份爱上加上一个期限,我希望是……
一万年
    </div>
    <div id="last">
        <span>周星驰</span>    曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 
如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
如果非要在这份爱上加上一个期限,我希望是……
一万年
    </div>
</div>


<script type="text/javascript">

    (function () {
        var wrap = document.getElementById('wrap'), first = document.getElementById('first');
        var timer = window.setInterval(move, 10);
        wrap.onmouseover = function () {
            window.clearInterval(timer);
        };
        wrap.onmouseout = function () {
            timer = window.setInterval(move, 10);
        };
        function move() {
            wrap.scrollLeft++;
            if (wrap.scrollLeft >= first.scrollWidth) {
                wrap.scrollLeft = 0;
            }
        }
    })();

</script>
</body>
</html>

努力,只为遇见更好的自己!