每日一练19：javascript插件库之无缝信息滚动

最新推荐文章于 2023-11-15 22:00:00 发布

那是遇知吧

最新推荐文章于 2023-11-15 22:00:00 发布

阅读量154

点赞数

分类专栏： javascript插件库

本文链接：https://blog.csdn.net/weixin_41406727/article/details/88902253

版权

本文介绍了JavaScript中创建无缝信息滚动和间歇性滚动的方法。利用setTimeout和setInterval实现滚动效果，通过鼠标移入移出控制滚动暂停与继续。无缝滚动会在鼠标移开时持续滚动，而间歇性滚动则是2行2行地循环滚动。

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

今天来学习信息的无缝滚动。

知识点：

setTimeout(表达式，延迟时间) 在执行时，是在载入后延长指定时间后，去执行一次表达式。只进执行一次。

setInterval(表达式，交互时间)在执行时，它从载入后，每隔指定的时间就执行一次表达式。

无缝滚动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#info {
				width: 600px;
				height: 196px;
				overflow: hidden;
				background-color: bisque;
			}
			
			#info p {
				width: 100%;
				height: 30px;
				padding: 5px;
				line-height: 30px;
				margin: 0;
				background-color: cornflowerblue;
			}
			
			#info ol {
				width: 100%;
				height: 156px;
				margin: 0 auto;
				/*padding-top:10px ;*/
				box-sizing: border-box;
				overflow: hidden;
			}
			
			#info ol li {
				height: 26px;
				line-height: 26px;
			}
			
			#infobox {
				width: 100%;
				height: 156px;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<p>新闻</p>
			<div id="infobox">
				<ol id="olinfo">
					<li>
						<a hre