×

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

作者:Web前端之家2020.07.24来源:Web前端之家浏览:462评论:0
关键词:js无缝滚动
微信公众号

微信公众号

500.jpg

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

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

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

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

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

向左滚动

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js文字向左无缝滚动 - Web前端之家 http://www.miarww.com.cn</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='http://www.miarww.com.cn'>Web前端之家</a></li>
                    <li><a href='http://www.miarww.com.cn/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/'>前端开发工具</a></li>
                    <li><a href='http://www.miarww.com.cn/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前端之家 http://www.miarww.com.cn</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前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</li>
            <li>Web前端之家 http://www.miarww.com.cn</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,有没有发现写法有点不同,有对比才有伤害,有些开发经验的童鞋会发现,第二种写法会好些。您可以用第二种方法去实现第一种效果的,试试吧。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js23420200724a2398.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria

时时彩平台哪个好 安徽快3投注 山东十一选五走势图爱彩乐 12093期排列3开奖结果 配资网站排名 河北11选五任选走势图 官方时时彩app下载手机版 上海福彩选四走势图 中国福利彩票3d总图 华东六省15选5开奖结果 赛车pk10精准计划 江苏十一选五交流 黑龙江p62中奖规则 辽宁35选7官方唯一 南洋股份股吧 内蒙古十一选五当前遗漏 福建十一选五开奖记录