《JavaScript实现字幕滚动轮播》

最新推荐文章于 2023-07-19 16:54:04 发布

sass86

最新推荐文章于 2023-07-19 16:54:04 发布

阅读量1.3k

点赞数

分类专栏： WEB前端全栈开发

本文链接：https://blog.csdn.net/weixin_42268792/article/details/83480340

版权

本文详细介绍了如何利用JavaScript创建字幕滚动轮播效果，包括HTML布局、JavaScript动态操作和CSS样式设置，旨在帮助开发者实现网页动态字幕展示。

摘要由CSDN通过智能技术生成

HTML代码如下：

		<div id="dome">
			<div id="dome1">
				<ul>
					<li>站长：Onlyou</li>
					<li>往事无可回首，今生请多指教</li>
					<li>今生愿无背离，来世仍多包涵</li>
					<li>你的过去，我已错过</li>
					<li>你的余生，只能是我</li>
					<li>为你点亮夜里的一盏灯</li>
					<li>那里，永远潜藏着少年</li>
					<li>今生许你花前月下娇宠一生</li>
					<li>来世仍多包涵许你闻香而来</li>
					<li>人世多风雨，愿相依取暖</li>
				</ul>
			</div>
			<div id="dome2"></div>
		</div>

JavaScript代码如下：

/*
	(1)网页加载完成，动画自动开始
	(2)获取三个<div>的对象
	(3)将三个<div>的高度设为一致
	(4)将dome1的内容，复制到dome2中
	(5)使用定时器：每隔40毫秒，动画向上滚动1个像素。
	(6)判断是否滚动到底了：滚动上去的距离，如果等于dome的高度
	   则开始下一次滚动。
	(7)鼠标放上