js实现走马灯效果

走马灯效果通常指的是一种文本或图片在页面上循环滚动的效果。在JavaScript中,我们可以使用定时器(如 setInterval)来实现这种效果。以下是一个简单的示例,展示了如何使用JavaScript和CSS实现走马灯效果:

1.HTML 结构

html<div class="marquee">
<p>这里是你的内容</p>
</div>

2.CSS 样式

css.marquee {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
white-space: nowrap;
}.marquee p {
display: inline-block;
padding-left: 100%; /* 初始时,文本从右边开始 */
animation: marquee 5s linear infinite; /* 应用动画 */
}

3.JavaScript

javascriptfunction Marquee() {
var mps = 100; // 每次移动像素
var elem = document.querySelector('.marquee p'); // 选择元素
var maxScroll = elem.offsetWidth; // 元素的总宽度
var currentScroll = 0; // 当前滚动位置
var interval = setInterval(function() { // 设置滚动速度
if (currentScroll <= maxScroll) { // 如果未到达元素总宽度
currentScroll += mps; // 向右移动一定距离
elem.style.paddingLeft = currentScroll + 'px'; // 应用新的滚动位置
} else { // 如果已经到达元素总宽度
currentScroll = 0; // 重置当前滚动位置
elem.style.paddingLeft = currentScroll + 'px'; // 应用新的滚动位置
}
}, 20); // 每20毫秒执行一次动画,你可以根据需要调整这个值
}

4.调用函数:页面加载完成后,自动调用 Marquee 函数。为了确保在所有浏览器中都能正常工作,可以使用 DOMContentLoaded 事件:

javascriptdocument.addEventListener("DOMContentLoaded", Marquee);

这样,你就有了一个简单的走马灯效果。当然,你可以根据需要进行进一步的样式和功能调整。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS SDK,助力开发者打造焕然一新的鸿蒙原生应用

鸿蒙生态千帆启航仪式于1月18日正式启动。从2019年HarmonyOS正式发布到2020年“没有人能够熄灭漫天星光”&#xff0c;今天&#xff0c;满天星光终汇成璀璨星河&#xff0c;HarmonyOS NEXT鸿蒙星河版重磅发布&#xff0c;带来了全新架构、全新体验、全新生态。作为支撑鸿蒙原生…

Spring--@Async解析

一、Async 简介 从Spring3开始提供了Async注解&#xff0c;被该注解标注的方法&#xff0c;Spring底层会新建一个线程池或者使用已有的线程池中的线程去异步的执行被标注的方法。 二、Async 工作原理 Async与Transactional 工作原理基本是一样的&#xff0c;也是通过Spring …

100天精通鸿蒙从入门到跳槽——第11天:TypeScript 知识储备:装饰器

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…

代码随想录 Leetcode150. 逆波兰表达式求值

题目&#xff1a; 代码(首刷看解析 2024年1月21日&#xff09;&#xff1a; class Solution { public:int evalRPN(vector<string>& tokens) {stack<long long> st; for (int i 0; i < tokens.size(); i) {if (tokens[i] "" || tokens[i] &qu…

AP5191 降压恒流 双灯 12V5A 一切一LED车灯汽车大灯驱动方案

AP5191是一款PWM工作模式,高效率、外围简 单、内置功率MOS管&#xff0c;适用于4.5-150V输入的高 精度降压LED恒流驱动芯片。输出功率150W&#xff0c; 电流6A。 AP5191可实现线性调光和PWM调光&#xff0c;线性调 光脚有效电压范围0.55-2.6V. AP5191 工作频率可以通过RT 外部…

咱们的打造自己的赚钱机器之打造自己的特色网站系列连续博文开始发布了

打造自己的赚钱机器之打造自己的特色网站前言1 咱们从今天开始正式连载咱们的打造个人特色网站系列博文. 整个博文实际上就是一本书,只是还未写出来.我就先以博文的形式发布,最后整理修改,再编撰成册. 那么,<<打造自己的特色网站>>系列博文为什么值得一看,又有哪…

win 下使用 cmd 运行 jar 包

1、使用 Win R 输入 cmd 命令打开命令提示符 2、在 cmd 窗口中输入以下命令 java -jar xxxxxx.jar 运行 jar 包&#xff0c;控制台出现中文乱码 原因是 windows 默认使用 GBK 编码格式&#xff0c;程序使用 UTF-8 编码格式 将编码格式改为 UTF-8 编码&#xff0c;在 cmd 窗…

JavaScript库jquery的使用方法

"写更少&#xff0c;做更多"是jquery的设计理念&#xff0c;jquery是一个兼容多浏览器的JavaScript库&#xff0c;利用jquery的语法设计能使开发更便捷。 网页添加jquery的方法:1.从jquery.com下载库&#xff1b;2.从CDN中载入库&#xff08;示例使用&#xff09;&a…

pytorch模型转caffe模型

记录一个好用的pytorch模型转caffe模型的方法&#xff0c;源码链接如下&#xff1a; https://github.com/xxradon/PytorchToCaffe 把代码clone下来后&#xff0c;进入example目录便可查看示例&#xff0c; cd example python resnet_pytorch_2_caffe.py import sys sys.pat…

【遥感数字图像处理(朱文泉)】各章博文链接汇总及思维导图

遥感数字图像处理课程汇总 第0章 绪论第一章 数字图像基础第二章 数字图像存储与处理第三章 空间域处理方法第四章 变换域处理方法第五章 辐射校正第六章 几何校正第七章 图像去噪声第八章 图像增强第九章 感兴趣目标及对象提取第十章 特征提取与选择第十一章 遥感数字图像分类…

【ASP.NET Core 基础知识】--路由和请求处理--路由概念(二)

一、路由参数传递方式 1.1 查询字符串参数 在路由中&#xff0c;查询字符串参数是一种常见的方式传递信息。这种方式通过URL中的查询字符串&#xff08;?key1value1&key2value2&#xff09;将参数附加到请求中。在ASP.NET Core中&#xff0c;可以通过以下方式在控制器动…

c++学习之IO流

目录 前言&#xff1a; 一&#xff0c;流的概念 二&#xff0c;c的io流 输入输出流 缓冲区的同步 文件流 文件的打开 文件读写自定义类型数据 字符流 1. 将数值类型数据格式化为字符串 2. 字符串拼接 3. 序列化和反序列化结构数据 前言&#xff1a; 在了解c的输入输…

SpringBoot异常处理和单元测试

学习目标 Spring Boot 异常处理Spring Boot 单元测试 1.SpringBoot异常处理 1.1.自定义错误页面 SpringBoot默认的处理异常的机制&#xff1a;SpringBoot 默认的已经提供了一套处理异常的机制。一旦程序中出现了异常 SpringBoot 会向/error 的 url 发送请求。在 springBoot…

c语言->学会offsetof宏计算结构体相对偏移量

前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青-CSDN博客 目的&#xff0c;学习offsetof宏计算结构体相对偏移量 1.offsetof宏 来我们看图…

vector讲解

在学习玩string后我们开始学习vector&#xff0c;本篇博客将对vector进行简单的介绍&#xff0c;还会对vector一些常用的函数进行讲解 vector的介绍 实际上vector就是一个数组的数据结构&#xff0c;但是vector是由C编写而成的&#xff0c;他和数组也有本质上的区别&#xff…

2.机器学习-K最近邻(k-Nearest Neighbor,KNN)分类算法原理讲解

2️⃣机器学习-K最近邻&#xff08;k-Nearest Neighbor&#xff0c;KNN&#xff09;分类算法原理讲解 个人简介一算法概述二算法思想2.1 KNN的优缺点 三实例演示3.1电影分类3.2使用KNN算法预测 鸢(yuan)尾花 的种类3.3 预测年收入是否大于50K美元 个人简介 &#x1f3d8;️&…

android 导航app 稳定性问题总结

一 重写全局异常处理&#xff1a; 1 是过滤掉一些已知的无法处理的 问题&#xff0c;比如TimeoutException 这种无法根除只能缓解的问题可以直接catch掉 2 是 一些无法继续的问题可以直接杀死重启&#xff0c;一些影响不是很大的&#xff0c;可以局部还原 比如&#xff1a; p…

题记(23)--整除问题

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 给定n&#xff0c;a求最大的k&#xff0c;使n&#xff01;可以被a^k整除但不能被a^(k1)整除。 二、输入描述 两个整数n(2<n<1000)&#xff0c;a(2<a<1000) 三、…

实时流媒体传输开源库——Live555

Live555&#xff08;LiveMedia Libraries&#xff09;是一个开源的多媒体流处理库&#xff0c;主要用于实现基于标准网络协议的实时流媒体传输。Live555提供了一套 C 类库&#xff0c;可以用于开发支持 RTP/RTCP、RTSP、SIP 等协议的流媒体服务器和客户端应用程序。它广泛用于视…

flink部署模式介绍

在一些应用场景中&#xff0c;对于集群资源分配和占用的方式&#xff0c;可能会有特定的需求。Flink 为各种场景提供了不同的部署模式&#xff0c;主要有以下三种&#xff0c;它们的区别主要在于&#xff1a; 集群的生命周期以及资源的分配方式&#xff1b;应用的 main 方法到…