js实现走马灯效果

简介: js实现走马灯效果

在JavaScript中实现走马灯效果,你可以使用setInterval函数来周期性地改变文本的位置。以下是一个简单的例子:

html<!DOCTYPE html>
<html>
<head>
<style>
#marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="marquee">
这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。这是一段走马灯文本,它将在页面上循环滚动。
</div>
<script>
window.onload = function() {
var marquee = document.getElementById("marquee");
var text = marquee.innerText;
var textWidth = marquee.offsetWidth;
var charWidth = textWidth / text.length;
var startPos = 0;
var endPos = textWidth;
var direction = -1;
var speed = 2;
setInterval(function() {
if (startPos + direction * speed > endPos) {
direction = -1;
} else if (startPos + direction * speed < 0) {
direction = 1;
} else {
startPos += direction * speed;
}
marquee.style.textIndent = startPos + 'px';
}, 50); // 每50毫秒移动一次
}
</script>
</body>
</html>

在这个例子中,我们首先获取了div元素,然后计算了每个字符的宽度,以及初始的开始位置和结束位置。然后我们使用setInterval函数来周期性地改变文本的缩进,从而实现了走马灯效果。注意这个例子中每50毫秒移动一次,你可以根据需要调整这个时间间隔。

相关文章
|
12天前
|
JavaScript 前端开发
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
28 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
7天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
13 1
|
15天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
2月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
3月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1