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

news2024/11/28 4:33:11
向左滚动

在这里插入图片描述

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1192300.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何修改NX二次开发菜单到NX自带的标签页

如何修改NX二次开发菜单到NX自带的标签页

最近一个项目需求&#xff0c;客户希望NX二次开发自定义的菜单能够集成在NX原来的标签页面上&#xff0c;但是我们以前从来没有这么做过&#xff0c;经过一番探索&#xff0c;后来解决了问题。 默认菜单在自定义页面&#xff0c;如下图所示&#xff1a; 但是我们希望这两个按钮…
阅读更多...
TCP/IP卷一详解第二章Internet地址结构概要

TCP/IP卷一详解第二章Internet地址结构概要

在这一章中介绍了Internet中使用的网络层地址&#xff08;也就是IP地址&#xff09;&#xff0c;还有如何为Internet中的设备分配地址&#xff0c;以及各种类型的地址等等…… 一、IP地址的表示 为大家所常见的有IPV4地址和IPV6地址&#xff0c;但在IPV4地址中&#xff0c;通…
阅读更多...
Docker安装ewomail

Docker安装ewomail

ewomail相关链接 官网官方安装文档gitee 开始安装 快速安装 wget -c https://down.ewomail.com/install-03.sh && sh install-03.sh 域名docker安装 创建docker容器 docker run -idt \-p 25:25 \-p 110:110 \-p 143:143 \-p 465:465 \-p 587:587 \-p 993:993 \-…
阅读更多...
基于IGT-DSER智能网关实现GE的PAC/PLC与罗克韦尔(AB)的PLC之间通讯

基于IGT-DSER智能网关实现GE的PAC/PLC与罗克韦尔(AB)的PLC之间通讯

工业自动化领域的IGT-DSER智能网关模块支持GE、西门子、三菱、欧姆龙、AB等各种品牌的PLC之间通讯(相关资料下载)&#xff0c;同时也支持PLC与Modbus协议的工业机器人、智能仪表等设备通讯。网关有多个网口、串口&#xff0c;也可选择WIFI无线通讯。无需编程开发&#xff0c;只…
阅读更多...
【Unity细节】如何让组件失活而不是物体失活

【Unity细节】如何让组件失活而不是物体失活

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…
阅读更多...
Linux设置N天未登录强制冻结

Linux设置N天未登录强制冻结

1、创建普通用户 2、90天未登录强制冻结 chage -E $(date -d "90 days" %Y-%m-%d) 用户名 3.更改系统日期 sudo date -s "2024-02-07 20:18:00" 4.过期未登录,提示如下 5.账号解冻 chage -E -1 用户名
阅读更多...
AI 为先的时代，企业如何深度用云？

AI 为先的时代，企业如何深度用云？

「又一年云栖&#xff0c;SOFAStack 走向云原生深处。」 SOFAStack 5.0 与蚂蚁集团代码大模型 CodeFuse 全面融合&#xff0c;涵盖设计、研发、测试、运维等领域&#xff0c;提供从领域建模到智能运维的端到端 Copilot 产品解决方案&#xff0c;为企业打造新一代 AI 云原生 Paa…
阅读更多...
网络层+数据链路层+物理层

网络层+数据链路层+物理层

一)网络层协议: 一)IP协议报头介绍: 咱们的IP协议能够在两点之间规划处一条合适的路径&#xff0c;什么叫做合适&#xff1f;那就得看咱们的TOS是怎么进行选的&#xff0c;比如说选择最大吞吐量&#xff0c;咱们就需要进行选择一个最大的带宽路径&#xff1b; 16位总长度:IP数据…
阅读更多...
grpc 重试机制

grpc 重试机制

1.通过配置retryPolicy的方式 这也是grpc官方库里的示例代码&#xff0c;其他讲retry重试的基本也都是参照这种方法。但是本地配置之后没生效。换用下边第二种方式之后问题解决 https://github.com/grpc/grpc-go/blob/be1d1c10a930/examples/features/retry/client/main.go …
阅读更多...
景联文科技加入中国人工智能产业发展联盟（AIIA），与行业各方共促AI产业发展

景联文科技加入中国人工智能产业发展联盟（AIIA），与行业各方共促AI产业发展

近日&#xff0c;景联文科技加入中国人工智能产业发展联盟&#xff08;AIIA&#xff09;&#xff0c;与行业各方共同挖掘人工智能数据的更多价值&#xff0c;破解中国人工智能AI数据短缺难题。 中国人工智能产业发展联盟&#xff08;简称AIIA&#xff09;是在国家发改委、科技部…
阅读更多...
this.$message提示内容添加换行

this.$message提示内容添加换行

0 效果 1 代码 let msgArr [只允许上传doc/docx/xls/xlsx/pdf/png/jpg/bmp/ppt/pptx/rar/zip格式文件,且单个文件大小不能超过20MB,已过滤无效的文件] let msg msgArr.join(<br/>) this.$message({dangerouslyUseHTMLString: true,message: msg,type: warning })
阅读更多...
django 批量 serializers listserializers

django 批量 serializers listserializers

Django drf 序列化器 序列化器 扩展serializers的有用性是我们想要解决的问题。但是&#xff0c;这不是一个微不足道的问题&#xff0c;而是需要一些严肃的设计工作。— Russell Keith-Magee, Django用户组 序列化器允许把像查询集和模型实例这样的复杂数据转换为可以轻松渲染…
阅读更多...
电力输送、材料和互连领域即将发生巨大变化

电力输送、材料和互连领域即将发生巨大变化

在设备互连方面&#xff0c;铜无可匹敌。其低电阻率和高可靠性为业界提供了出色的片上互连和芯片间连线服务。但在逻辑芯片中&#xff0c;随着互连堆栈上升到14级范围&#xff0c;并且阻容(RC)延迟在总延迟中所占的比例越来越大&#xff0c;晶圆厂正在寻求替代金属来维持性能。…
阅读更多...
LeetCode_多源 BFS_中等_2258.逃离火灾

LeetCode_多源 BFS_中等_2258.逃离火灾

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid &#xff0c;它表示一个网格图。每个格子为下面 3 个值之一&#xff1a; 0 表示草地。1 表示着火的格子。2 表示一座墙&#xff0c;你跟火都不能通过…
阅读更多...
使用ffmpeg 压缩视频

使用ffmpeg 压缩视频

我有一批1080p的视频,在网上播放占用空间太大,需要进行压缩以后再上传,下面是记录一下ffmpeg命令的使用情况 原视频大小:288mb --压缩加修改分辨率 640p ffmpeg -y -i C4995.mp4 -vcodec libx264 -crf 18 -s vga C4995\C4995_2.MP4 -y: 强制覆盖 -i :输入文件 -vcodec lib…
阅读更多...
基于Springboot的智慧食堂设计与实现（有报告）。Javaee项目，springboot项目。

基于Springboot的智慧食堂设计与实现（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的智慧食堂设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 项…
阅读更多...
国内外PLC的差异化对比

国内外PLC的差异化对比

在聊PLC的市场格局和国产发展现状之前&#xff0c;我们先来简单了解一下PLC的作用。所谓PLC&#xff0c;你可以把它当成是一台小型电脑&#xff0c;只不过这台电脑是专用于工业领域&#xff0c;用来控制各种机械或生产的过程。比如说我们身上穿的衣服&#xff0c;都是由机器缝制…
阅读更多...
SpringCloud——负载均衡——Ribbon

SpringCloud——负载均衡——Ribbon

负载均衡分为集中式LB(Nginx实现)和进程内LB(Ribbon)。 Ribbon简单来说就是负载均衡RestTemplate调用。 1.Ribbon在工作中分成两步 1.先选择EurekaServer&#xff0c;它优先选择在同一个区域内负载较少的EurekaServer。 2.在根据用户指定的策略&#xff0c;从服务注册的列表…
阅读更多...
打印图形

打印图形

题目描述 由键盘输入一个大写字母 ( 到 中的任意一个 ) &#xff0c;输出如下图所示由相关大写字母组成的图形。 所输入的字母一定为输出文件的第一个字符( 位于图形的左上角 ) &#xff0c;其余部分的字母构成规律和分布由样例给出。 输入格式 一行&#xff0c;仅为一个大写…
阅读更多...
Unity Mirror学习（三）ClientRpc特性使用

Unity Mirror学习（三）ClientRpc特性使用

ClientRpc特性 1&#xff0c;从服务端任意一网络对象发送到客户端 2&#xff0c;修饰方法的&#xff0c;在服务器上调用此方法&#xff0c;它将在所有客户端执行&#xff08;我的理解:服务端广播消息&#xff0c;消息方法&#xff09; 3&#xff0c;此方法不会在本地执行 它和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023