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毫秒移动一次,你可以根据需要调整这个时间间隔。

相关文章
|
3月前
|
JavaScript 前端开发
JS走马灯小功能制作
JS走马灯小功能制作
17 0
|
4月前
|
JavaScript 前端开发
js实现走马灯效果
js实现走马灯效果
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
70 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
63 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
55 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
67 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
71 3
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
62 3
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
44 3