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 环境： 步骤： 更新系统软件包： 在终端中执行以下命令，确…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...