js实现上下无缝滚动（不卡顿）

已于 2023-07-25 17:20:23 修改
阅读量2.2k 收藏 6
点赞数 3
分类专栏： js 文章标签： javascript 前端 css
于 2023-07-25 17:05:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695853/article/details/131922071
版权
效果图如下：

在这里插入图片描述
在这里插入图片描述

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .out-box {
            margin: 100px auto;
            width: 600px;
            height: 300px;
            border: 1px solid #f29634;
            overflow: hidden;
        }

        .list .item {
            width: 500px;
        }

        .list .item {
            margin-bottom: 30px;
        }

        .list .item .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top .top-left {
            flex: 1;
        }

        .top .top-left .num {
            color: #f29634;
            font-size: 20px;
            padding-right: 10px;
        }

        .bottom {
            position: relative;
            width: 100%;
            height: 2px;
            background: #f29634;
            margin-top: 20px;
        }

        .bottom::after {
            position: absolute;
            content: "";
            width: 80%;
            height: 10px;
            bottom: 5px;
            background: #f29634;
        }
    </style>
</head>

<body>
    <div class="out-box" id="demo">
        <div class="list" id="demo1">
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.1</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.2</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.3</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.4</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.5</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="top-left">
                        <span class="num">No.6</span>
                        <span>宝娟</span>
                    </div>
                    <div class="top-right">
                        我嗓子痛
                    </div>

                </div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="list" id="demo2"></div>
    </div>
    <script>
        var speed = 10
        var _demo = document.getElementById("demo");
        var _demo1 = document.getElementById("demo1");
        var _demo2 = document.getElementById("demo2");
        demo2.innerHTML = demo1.innerHTML
        function Marquee() {
           
            if (_demo2.offsetTop - _demo.scrollTop-_demo.offsetTop <= 0) {
                // _demo.scrollTop -= (_demo1.offsetHeight + (_demo1.offsetHeight - _demo.offsetHeight) )
                _demo.scrollTop = 0
                console.log('<0:'+ _demo.scrollTop);
            } else {
                _demo.scrollTop++
                // console.log('>0:'+ _demo.scrollTop);
            }
        }
        var MyMar = setInterval(Marquee, speed)
        _demo.onmouseover = function () { clearInterval(MyMar) }
        _demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
    </script>
</body>

</html>
吃葡萄不吐葡萄皮嘻嘻
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
JavaScript 实现文字上下滚动效果（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 1079
JavaScript 实现文字上下滚动效果（附完整源码）
js实现无缝滚动
莫小遇
11-06 683
这一段时间开始正式学习JS以及一些效果制作。
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 5465
JS无缝滚动轮播图案例
手把手教你用原生js实现无缝滚动
Devil_ErKang的博客
04-07 5362
效果展示 上图就是我们要实现的无缝滚动效果。 整体思路 按照惯例我们先来说一下思路，一开始图片静止，点击各个按钮，顾名思义都有相应的效果，无缝滚动最主要的效果就是图片一直保持匀速运动。 点击向右按钮（点击事件），红色框框内（框框相对定位）的图片（图片绝对定位）开始滚动，不停止（定时器），这里所有图片应该用一个容器包裹起来绝对定位给到这个图片的父级容器，然后，设置一个定时器，获取图片父级容器的left，每运行一次定时器，增加一次或减少一次left，这样就可以做出向...
js实现无限滚动加载数据
最新发布
lbking666666的专栏
07-16 896
entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。
【 vue 无限滚动】- 无缝滚动的解决方法
weixin_64461654的博客
02-28 1250
自动滚动
javascript实现无缝上下滚动(转)
weixin_34273046的博客
08-09 147
js实现上下无缝滚动的原理是这样的： 1、首先给容器设定高度或宽度，然后overflow:hidden； 2、容器高度设定后，内容超出则被隐藏。3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置（滚动的原理）； 4、到滚动的高度scrollTop大于或等于要滚动节点的高度时，设置scrollTop=0，并把把子节点树中的第一个移动到最后，重新开始滚动，无间断循环滚...
无缝滚动
yutin781528452的博客
08-11 2097
让物体运动起来： offsetLeft是物体的左边距 实例： 做一个横向的滚动条，让其往左边滚动，  ， 先设好基本样式，特别注意div1和ul的绝对定位和相对定位，如果div不设置相对定位，那么ul的滚动条就会以整个页面为相对位置，在left:0和top:0的位置进行滚动，也就是页面左上角，（本来是页面中间） 如果ul不设置绝对定位或者设置在li上，那么都不会滚动。 但...
JavaScript上下无缝滚动
KevinMiGuan的博客
05-23 866
JavaScript上下无缝滚动JavaScript代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JavaScript上下滚动&lt;/title&gt; &lt;style type="text/
JS上下无缝滚动效果
02-09 121
JS上下无缝滚动效果: 可自定义每次滚动的px量，滚动的方向（上或者下），滚动速度。 &lt;?xml version="1.0" encoding="UTF-8" ?&gt; &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt
【仅适合初学者】js 实现 文字上下滚动
05-16
jQuery 实现文字上下滚动
JS上下无缝滚动效果JS上下无缝滚动效果
02-20
JS上下无缝滚动效果JS上下无缝滚动效果JS上下无缝滚动效果
javascript实现的上下无缝滚动效果
11-23
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下： 前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动——上下</title> <style type="text/css"> *{margin:0;padding:0;} li{list-style:none;}
js实现上下滚动跑马灯效果
05-10
实现跑马灯上下滚动效果，marquee标签被摒弃后不使用js实现的跑马灯效果保险些
JS上下滚动
07-02
JS上下滚动特效代码，以上代码为案例，运用时必须自行修改
使用Javascript简单实现图片无缝滚动
10-25
`使滚动容器外的图片不可见，从而实现无缝滚动的视觉效果。我们还需要设置滚动容器的宽度，使其大于所有图片宽度的总和，这样图片才能在滚动时无缝衔接。 在JavaScript代码部分，我们首先获取到滚动容器`wrap`以及...
JavaScript实现简单精致的图片左右无缝滚动效果
10-20
在探讨如何使用JavaScript实现一个图片左右无缝滚动效果的项目中，我们首先要理解几个关键点。首先，JavaScript是一种用于网页开发的脚本语言，它能够实现页面的动态变化和用户交互。而时间函数则是指JavaScript中...
基于javascript的无缝滚动动画实现2
10-14
在本文中，我们将深入探讨如何使用JavaScript实现这一功能，特别是针对“无缝滚动动画实现2”的优化和改进。 在基于JavaScript的无缝滚动动画实现1中，我们可能已经了解了基本的原理：通过修改元素的`scrollTop`或`...
jquery无卡顿向上滚动实现代码
05-30
以下是一个简单的 jQuery 实现向上滚动的代码示例： HTML 代码： ```html <div id="scroll-container"> <ul> <li>第一条消息</li> <li>第二条消息</li> <li>第三条消息</li> <li>第四条消息</li> <li>第五条消息</li> </ul> </div> ``` CSS 代码： ```css #scroll-container { height: 200px; overflow: hidden; } #scroll-container ul { list-style: none; margin: 0; padding: 0; } #scroll-container ul li { margin: 10px 0; } ``` JavaScript 代码： ```javascript $(document).ready(function() { var containerHeight = $('#scroll-container').height(); var itemHeight = $('#scroll-container ul li').outerHeight(); var items = $('#scroll-container ul li').clone(); $('#scroll-container ul').append(items); setInterval(function() { var scrollTop = $('#scroll-container').scrollTop(); if (scrollTop + containerHeight >= itemHeight * items.length) { $('#scroll-container').scrollTop(0); } else { $('#scroll-container').scrollTop(scrollTop + itemHeight); } }, 2000); }); ``` 代码解释： 1. 首先获取容器 `#scroll-container` 的高度和列表项 `li` 的高度。 2. 复制列表项，添加到列表的末尾，以实现无限循环滚动。 3. 使用 `setInterval` 函数每隔 2 秒钟执行一次滚动操作。 4. 获取当前滚动位置 `scrollTop`，如果已经滚动到最后一条消息，将滚动位置重置为 0，否则将滚动位置加上一个列表项的高度，实现向上滚动的效果。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值