JS实现列表上下滚动模拟广播消息

最新推荐文章于 2024-12-25 16:40:48 发布

原创

最新推荐文章于 2024-12-25 16:40:48 发布 · 649 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Javascript

本文通过JavaScript展示了如何创建一个模拟广播消息的滚动列表，实现了无限循环、悬停停止及消息暂停显示的功能。借助Jquery库，作者优化了原始代码以增强用户体验。

实现效果

无限循环
悬停停止
增加了消息出现的暂停

实现代码

代码使用的是到处CV的那个书讯快递的版本，原始代码还是不错得，我自己在此基础上做了改进，实现滚动暂停的效果。

记得导入Jquery

<!DOCTYPE html>
<html>
	<head>
		<style>
			.scrollNotice {
    
    
				height: 30px;
				width: 100px;
				overflow: hidden;
			}

			.scrollNotice li {
    
    
				height: 30px;
				text-overflow: ellipsis;
				white-space:nowrap;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<ul id="scrollNotice" class="scrollNotice">
			<li id="noticeId1">1・IDEA*****************************