js实现向上、向下、向左、向右无缝滚动

最新推荐文章于 2024-07-30 17:19:26 发布
最新推荐文章于 2024-07-30 17:19:26 发布
阅读量1.8k 收藏 15
点赞数 4
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695853/article/details/134330434
版权
向左滚动

在这里插入图片描述

<!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>无缝滚动向左滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        .scroll_content {
            display: flex;
        }

        #list,
        #list1 {
            display: flex;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;

        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 滚动盒子 -->
        <div id="scroll_content" class="scroll_content">
            <!-- 列表1 -->
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <!-- 复制一份 -->
            <div id="list1">
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {

            var speed = 10;
            var tab = document.getElementById("wrapper");
            var tab1 = document.getElementById("list");
            var tab2 = document.getElementById("list1");
            tab2.innerHTML = tab1.innerHTML;
            function Marquee() {
                if (tab2.offsetWidth - tab.scrollLeft <= 0)
                    tab.scrollLeft -= tab1.offsetWidth
                else {
                    tab.scrollLeft++;
                }
            }
            var MyMar = setInterval(Marquee, speed);
            tab.onmouseover = function () { clearInterval(MyMar) };
            tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
        }
    </script>
</body>

</html>
向右滚动

在这里插入图片描述

<!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>无缝滚动向右滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        .scroll_content {
            display: flex;
        }

        #list,
        #list1 {
            display: flex;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;

        }
        .item img{
            width: 100%;
        }

        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }

        #list1 .item:last-child {
            background: red;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 滚动盒子 -->
        <div id="scroll_content" class="scroll_content">
            <!-- 列表1 -->
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <!-- 复制一份 -->
            <div id="list1">
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {

            var speed = 10;
            var tab = document.getElementById("wrapper");
            var tab1 = document.getElementById("list");
            var tab2 = document.getElementById("list1");
            tab2.innerHTML = tab1.innerHTML;
            function Marquee() {
                if (tab.scrollLeft <= 0) {
                    tab.scrollLeft += tab2.offsetWidth
                }
                else {
                    tab.scrollLeft--;
                }
                
                console.log(tab.scrollLeft, tab2.offsetWidth);
            }
            var MyMar = setInterval(Marquee, speed);
            tab.onmouseover = function () { clearInterval(MyMar) };
            tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
        }
    </script>
</body>

</html>
向上滚动

在这里插入图片描述

<!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>向上滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 200px;
            height: 600px;
            overflow: hidden;
            margin: 10px;
        }

        .item {
            width: 200px;
            height: 200px;
        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: pink;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div class="scroll_content">
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <div id="list1"></div>
        </div>
    </div>
    <script>
        var speed = 10; //数字越大速度越慢
        var wrapper = document.getElementById("wrapper");
        var list = document.getElementById("list");
        var list1 = document.getElementById("list1");
        list1.innerHTML = list.innerHTML; //克隆list为list1
        function Marquee() {
            if (list1.offsetTop - wrapper.scrollTop <= 0)
                wrapper.scrollTop -= list.offsetHeight 
            else {
                wrapper.scrollTop++
            }
        }
        var MyMar = setInterval(Marquee, speed);
        wrapper.onmouseover = function () { clearInterval(MyMar) };
        wrapper.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    </script>
</body>

</html>
向下滚动

在这里插入图片描述

<!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>向下滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 200px;
            height: 600px;
            overflow: hidden;
            margin: 10px;
            cursor: pointer;
        }

        .item {
            width: 200px;
            height: 200px;
        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: pink;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div class="scroll_content">
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <div id="list1"></div>
        </div>
    </div>
    <script>
        var speed = 10; //数字越大速度越慢
        var tab = document.getElementById("wrapper");
        var tab1 = document.getElementById("list");
        var tab2 = document.getElementById("list1");
        tab2.innerHTML = tab1.innerHTML; 
        tab.scrollTop = tab.scrollHeight
        function Marquee() {
            if (tab1.offsetTop - tab.scrollTop >= 0)
                tab.scrollTop += tab2.offsetHeight 
            else {
                tab.scrollTop--
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function () { clearInterval(MyMar) };
        tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    </script>
</body>

</html>
吃葡萄不吐葡萄皮嘻嘻
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
高级无缝滚动 js案例
猿码互联
06-11 439
事件，当鼠标进入容器时暂停动画，鼠标离开时恢复动画。属性用来实现平移动画。JavaScript代码监听。元素是一个带有固定宽度和高度的容器，用来包裹。以上代码实现了一个水平滚动的效果。元素是一个带有无序列表的容器，关键帧来实现滚动效果，
js、react、vue里滚动到底部加载数据和滚动到顶部实现（js监听滚动事件，到底部请求接口）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-11 4401
前言： 最近在做一个项目，一个列表展示原本是分页器，点击下一页，请求接口。但是业务说需要改成滑倒底部，加载数据。 一、实现过程 1.html+js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
html图片自动向左滚动代码,图片无缝滚动代码(向左/向下/向上)
weixin_31499919的博客
06-02 1048
想必大家都注意到的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时...
html新闻上下自动滚动代码,Html js轻松实现 向上下左右循环滚动代码
weixin_36193418的博客
05-30 1140
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.inne...
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-09 1997
文字图片无缝滚动示例效果
Vue上实现上下左右无缝滚动、单步滚动-demo
JackieDYH的博客
03-25 1598
拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向，可选值up，down，left，right。通过v-model控制动画滚动与停止，默认开始滚动。开启滚动的数据量，只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启。无缝滚动列表数据，组件内部使用列表长度。动画效果，可以传入贝塞尔曲线数值。动画循环次数，默认无限循环。
（Vue | JS）页面元素无缝滚动，支持 上 | 下 | 左 | 右
qq_27302871的博客
08-03 979
支持在Vue中引入使用，也可在静态页面中直接使用，支持elemntUi表格滚动，只依赖于jQuery
手把手教你用原生js实现无缝滚动
Devil_ErKang的博客
04-07 5306
效果展示 上图就是我们要实现的无缝滚动效果。 整体思路 按照惯例我们先来说一下思路，一开始图片静止，点击各个按钮，顾名思义都有相应的效果，无缝滚动最主要的效果就是图片一直保持匀速运动。 点击向右按钮（点击事件），红色框框内（框框相对定位）的图片（图片绝对定位）开始滚动，不停止（定时器），这里所有图片应该用一个容器包裹起来绝对定位给到这个图片的父级容器，然后，设置一个定时器，获取图片父级容器的left，每运行一次定时器，增加一次或减少一次left，这样就可以做出向...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
在给出的示例代码中，可以看到两个不同的滚动方向：向下滚动和向上滚动。这里我们主要关注向下滚动的部分，因为向上滚动的代码与之类似，只是方向相反。 1. **向下滚动代码解析**： - `#colee` 是一个包含图片的父...
无缝滚动向上向下向左向右的代码
12-02
无缝滚动 文字滚动 图片滚动 网页文字滚动代码 js图片滚动 无缝滚动向上向下向左向右的代码 四个方向
无缝滚动改进版支持上下左右滚动（封装成函数）
09-05
在提供的代码中，无缝滚动实现了上下左右四个方向的支持，这主要依赖于JavaScript和CSS的配合。下面将详细解释这个改进版无缝滚动的实现原理和关键点。 1. **HTML结构**： 代码中包含一个ID为`scroll`的容器，内部...
图片不间断无缝滚动 上下左右4种都有
05-17
js jquery图片不间断无缝滚动代码 向上 向下 向左 向右滚动 js 文件适合大部分程序员使用，基本的滚动功能
JavaScript实现图片无缝滚动效果
10-19
向左或向右滚动的实现与向上、向下类似，只是滚动的方向改为水平方向，相应的 `scrollTop` 更改为 `scrollLeft`，同时 CSS 样式中的 `width` 和 `left` 属性需要进行相应调整。 5. **图片数量的计算**： 可视区域...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 577
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 257
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
最新发布
m0_62626838的博客
07-30 159
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
vue3如何实现键盘向左向右向上向下选择元素
06-09
在Vue3中，可以使用`ref`来获取DOM元素的引用，然后监听键盘事件来实现元素的选择。 例如，我们可以为需要选择的元素添加`ref`属性： ```html <template> <div> <div ref="item1">Item 1</div> <div ref="item2">Item 2</div> <div ref="item3">Item 3</div> </div> </template> ``` 然后在`mounted`钩子函数中，通过`$refs`来获取DOM元素的引用，并监听`keydown`事件： ```javascript export default { mounted() { const items = this.$refs; let selected = 0; // 当前选中的元素索引 const length = Object.keys(items).length; // 元素的总数 // 监听键盘事件 document.onkeydown = (event) => { if (event.keyCode === 37) { // 向左箭头 selected = selected === 0 ? length - 1 : selected - 1; items[`item${selected + 1}`].scrollIntoView({ behavior: "smooth", block: "center" }); } else if (event.keyCode === 38) { // 向上箭头 selected = selected === 0 ? length - 1 : selected - 1; items[`item${selected + 1}`].scrollIntoView({ behavior: "smooth", block: "center" }); } else if (event.keyCode === 39) { // 向右箭头 selected = selected === length - 1 ? 0 : selected + 1; items[`item${selected + 1}`].scrollIntoView({ behavior: "smooth", block: "center" }); } else if (event.keyCode === 40) { // 向下箭头 selected = selected === length - 1 ? 0 : selected + 1; items[`item${selected + 1}`].scrollIntoView({ behavior: "smooth", block: "center" }); } }; }, }; ``` 在上述代码中，我们通过`scrollIntoView`方法来将选中的元素滚动到可视区域中心。当然，你也可以根据需要实现其他的选择逻辑。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

吃葡萄不吐葡萄皮嘻嘻

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

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

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

打赏作者

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

抵扣说明：

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

余额充值