Web前端开发每日小结：使用Javascript元素无缝向左向上滚动

作者：Terry2020.07.24来源：Web前端之家浏览：6956评论:0

关键词：js 无缝滚动

Web前端开发中，文字或者图片无缝滚动的功能经常会遇到，比如向左向上循环滚动、一条条的滚动、多条一起滚动等等效果，很多小伙伴们习惯用插件去实现，比如swiper等。

想了解关于逐条或者单条滚动的童鞋可以看下之前分享的一篇文章：

一起来玩玩基于JS的无缝滚动通用动画效果

今天介绍下用原生javascript如何实现文字向上和向左无缝循环滚动。

先来看下向左滚动的效果：

向左滚动

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js文字向左无缝滚动 - Web前端之家 https://www.jiangweishan.com</title>
</head>
<body>
    <style type="text/css">
        .qimo8
        {
            overflow: hidden;
            width: 815px;
        }
        .qimo8 .qimo
        {
            /*width:99999999px;*/
            width: 8000%;
            height: 30px;
        }
        .qimo8 .qimo div
        {
            float: left;
        }
        .qimo8 .qimo ul
        {
            float: left;
            height: 30px;
            overflow: hidden;
            zoom: 1;
        }
        .qimo8 .qimo ul li
        {
            float: left;
            line-height: 30px;
            list-style: none;
        }
        .qimo8 li a
        {
            margin-right: 10px;
            color: #444444;
        }
    </style>
    <div id="demo" class="qimo8">
        <div class="qimo">
            <div id="demo1">
                <ul>
                    <li><a href='https://www.jiangweishan.com'>Web前端之家</a></li>
                    <li><a href='https://jiangweishan.com/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/'>前端开发工具</a></li>
                    <li><a href='https://jiangweishan.com/VueJs/'>VUEJS</a></li>
                </ul>
            </div>
            <div id="demo2">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var demo2 = document.getElementById("demo2");
        demo2.innerHTML = document.getElementById("demo1").innerHTML;
        function Marquee() {
            if (demo.scrollLeft - demo2.offsetWidth >= 0) {
                demo.scrollLeft -= demo1.offsetWidth;
            }
            else {
                demo.scrollLeft++;
            }
        }
        var myvar = setInterval(Marquee, 30);
        demo.onmouseout = function () { myvar = setInterval(Marquee, 30); }
        demo.onmouseover = function () { clearInterval(myvar); }
    </script>
</body>
</html>

可以预览看下效果。

向上滚动

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>向上滚动 - Web前端之家 https://www.jiangweishan.com</title>
    <style>
        *{margin: 0;padding: 0}
        #box{height: 140px; border: solid 1px; overflow: hidden;}
    </style>
</head>

<body>
    <div id="box">
        <ul id="ul1">
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
            <li>Web前端之家 https://www.jiangweishan.com</li>
        </ul>
        <ul id="ul2"></ul>
    </div>
    <script>
        window.onload = roll(50);

        function roll(t) {
            var ul1 = document.getElementById("ul1");
            var ul2 = document.getElementById("ul2");
            var box = document.getElementById("box");
            ul2.innerHTML = ul1.innerHTML;
            box.scrollTop = 0;
            var timer = setInterval(rollStart, t);
            box.onmouseover = function () {
                clearInterval(timer)
            }
            box.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }

        function rollStart() {
            if (box.scrollTop >= ul1.scrollHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop++;
            }
        }
    </script>
</body>

</html>

大家看完两个DEMO，有没有发现写法有点不同，有对比才有伤害，有些开发经验的童鞋会发现，第二种写法会好些。您可以用第二种方法去实现第一种效果的，试试吧。

赏您的支持是我们创作的动力！