JavaScript小实例-文字跑马灯效果

我们常常能看到显示屏上字体的滚动以及手机弹幕等，下面所示代码就是一个简易的文字跑马灯的效果：
<!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: 1000px;
            margin: 20px auto;
            border: 2px solid #51C9F1;
            white-space: nowrap;
            overflow: hidden;
            padding: 10px;
            color: gold;
            background: mediumpurple;
        }

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

        #wrap span {
            font-size: 20px;
            color: yellow;
        }


    </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, 5);
        wrap.onmouseover = function () {
            window.clearInterval(timer);
        };
        wrap.onmouseout = function () {
            timer = window.setInterval(move, 5);
        };
        function move() {
            wrap.scrollLeft++;
            if (wrap.scrollLeft >= first.scrollWidth) {
                wrap.scrollLeft = 0;
            }
        }
    })();

</script>
</body>
</html>
JavaScript小实例-文字跑马灯效果

猜你喜欢
