js实现向上、向下、向左、向右无缝滚动
向左滚动
<!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.offsetWidthelse {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为list1function 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.scrollHeightfunction 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>
相关文章：
js实现向上、向下、向左、向右无缝滚动
向左滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, ini…...
6 Hive引擎集成Apache Paimon
更多Paimon数据湖内容请关注：https://edu.51cto.com/course/35051.html 在实际工作中，我们通查会使用Flink计算引擎去读写Paimon，但是在批处理场景中，更多的是使用Hive去读写Paimon，这样操作起来更加方便。 前面我们…...
发布版本自动化记录版本功能方法
# 安装commitizennpm install --save-dev commitizen# 初始化Conventional Commits规范适配器npx commitizen init cz-conventional-changelog --save-dev --save-exact最后一步，需要在package.json中添加一个script"scripts": {..., // 此处省略其它配置…...
Elastic Stack 8.11：引入一种新的强大查询语言 ES|QL
作者：Tyler Perkins, Ninoslav Miskovic, Gilad Gal, Teresa Soler, Shani Sagiv, Jason Burns Elastic Stack 8.11 引入了数据流生命周期、一种配置数据流保留和降采样（downsampling） 的简单方法（技术预览版）…...
wx:for-item wx:for-index wx:for-key
wx:for-item wx:for-item , 数组当前项的变量名,默认为 item 作用：使用 （当前项变量名.属性名） 取得属性值每一项 <view wx:for"{{array}}"><view>{{item.name item.age }}</view> </view>等同于 &…...
老师还不会评课？这里有你需要的解决方案
优点： 1.课件制作: 老师的PPT设计得很新颖，插入的音乐视频都非常贴合课堂内容，看得出老师非常用心地进行了设计。 2.教师素养：老师的语言丰富、朗读能力很出色、板书设计很工整。 3.教师风格: xx老师上课激情澎湃/非常有亲和力…...
Talk | 马里兰大学博士生吴曦旸：分布式多智能体强化学习在复杂交通轨迹规划中的应用
本期为TechBeat人工智能社区第545期线上Talk！ 北京时间11月09日(周四)20:00，马里兰大学博士生—吴曦旸的Talk已准时在TechBeat人工智能社区开播！ 他与大家分享的主题是: “分布式多智能体强化学习在复杂交通轨迹规划中的应用”，介…...
2023年下半年架构案例真题及答案
案例的考点： 大数据架构 Lambda架构和Kappa架构 jwt特点 数据持久层，Redis数据丢失，数据库读写分离方案 Hibernat架构 SysML七个关系，填需求图 大数据的必选题： 某网作为某电视台在互联网上的大型门户入口&#…...
Java必考面试题，谈谈你对 Spring AOP 的理解
大家好，我是伍六七。 今天我们来学习 Spring 框架中最重要的概念之一：AOP。 这是一个 Java 程序员必考的面试题，大家好好理解。我们开始正文。 AOP 的概念 Spring AOP 是 Java 程序员们面试经常被问到的一个问题，但 AOP&#…...
BERT和ChatGPT简单对比
OpenAI发布了第一个版本的GPT（Generative Pretrained Transformer）模型在2018年6月。 谷歌的BERT模型（Bidirectional Encoder Representations from Transformers）是在2018年10月发布的。 BERT和ChatGPT都是由人工智能研究实验室…...
又一重要合作，创邻科技华为云联营产品正式发布
近日，创邻科技旗下的“Galaxybase高性能图平台”正式入驻华为云云商店联营商品，创邻科技成为华为云在数据库与缓存领域的联营联运合作伙伴。通过联营联运模式，双方合作能够深入产品、生态、解决方案等多个领域，助力各行业用户数字…...
PHP+Swoole应用示例
**Swoole是一个C编写的基于异步事件驱动和协程的并行网络通信引擎，为PHP提供高性能网络编程支持** ## ⚙️ 快速启动 可以直接使用 [Docker](https://github.com/swoole/docker-swoole) 来执行Swoole的代码，例如： bash docker run --rm php…...
3线硬件SPI+DMA驱动 HX8347 TFT屏
3线硬件SPIDMA驱动 HX8347 TFT屏，实现用DMA清屏。 参考：基于stm32 标准库spi驱动st7789彩屏TFT(使用DMA)-技术天地-深圳市修德电子有限公司 一、源码 HX8347.h #ifndef USER_HX8347_H_ #define USER_HX8347_H_#define SPI_hardware #define SPI_hardw…...
实验语音学的基本概念
语音学 实验语音学只是语音学的一个分支，那么语音学到底是研究什么的呢？我们先有一个大致了解。 语音学是研究语言声音体系的学科。语音学的任务是研究说明语音的性质，内部结构和单位，语音的分类和组合，语音的产生、…...
市场上ios签名公司做什么的？
iOS签名公司是提供iOS应用程序签名服务的公司。它们为开发者提供了一种简单的方式来将他们的应用程序发布到iOS设备上，同时也为用户提供了一种下载和安装这些应用程序的方法。这些公司提供的签名服务包括苹果企业签名和开发者签名，其中企业签名是为企业开…...
12. 一文快速学懂常用工具——docker 命令
本章讲解知识点 Docker 引擎Docker 常用命令Docker 生命周期详解Containerd 与 Docker 命令对比本专栏适合于软件开发刚入职的学生或人士，有一定的编程基础，帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化，尽量做到好记、言简意赅。如专栏内容有错…...
API低代码开发应用场景
什么是API低代码开发平台 API低代码开发平台是一种基于低代码开发的技术平台，它可以帮助企业快速构建和部署API应用程序。该平台通过提供可视化的开发工具、预定义的组件和模板、自动化的代码生成等功能，使得开发者可以在不需要编写大量代码的情况下&am…...
从零开始搭建React+TypeScript+webpack开发环境-性能优化
前言 当我们开发React应用时，性能始终是一个重要的考虑因素。随着应用规模的增长，React组件的数量和复杂性也会相应增加，这可能会导致性能问题的出现。在这篇博文中，我们将探讨如何通过一系列的技巧和最佳实践来优化React应用的性…...
sCrypt 现在支持 Ordinals 了
比特币社区对 1Sat Ordinals 的接受度正在迅速增加，已有超过 4800 万个铭文被铸造，这一新创新令人兴奋不已。 尽管令人兴奋，但 Ordinals 铭文的工具仍然不发达，这使得使用 Ordinals 进行构建具有挑战性。 更具体地说，缺…...
乌班图搭建 LAMP
搭建 LAMP（Linux、Apache、MySQL、PHP）堆栈是在 Ubuntu 上构建 Web 服务器的常见任务。以下是一些步骤，指导如何在 Ubuntu 上搭建 LAMP 环境： 步骤： 更新系统软件包： 在终端中执行以下命令，确…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...