Web_JavaScript_列表元素滚动；

最新推荐文章于 2022-04-26 10:17:00 发布

cyb_23

最新推荐文章于 2022-04-26 10:17:00 发布

阅读量608

点赞数

分类专栏： Web_JavaScript

本文链接：https://blog.csdn.net/cyb_23/article/details/35992599

版权

Web_JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript实现HTML列表元素的无缝滚动效果。通过设置元素的高度、利用定时器调整top属性以及监听鼠标悬停事件来控制滚动的启停，创建了一个循环滚动的列表。代码中包括HTML结构、CSS样式以及JavaScript逻辑，适用于网页动态效果的开发。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>元素滚动</title>
	
	<script type="text/javascript">
		// 元素滚动
		function elementRoll() {
			// 元素
			var ulid = document.getElementById('ulid');
			var lis = ulid.getElementsByTagName('li');
			// 元素设置
			ulid.innerHTML+=ulid.innerHTML;	// 解决滚动后空白；
			ulid.style.height = lis[0].offsetHeight*lis.length+'px';	// 设置列表高度；
						
			// 速度
			var speed = -1;
			var timer=null;
			// 滚动
			timer=setInterval(function (){
				// 通过设置top属性来实现滚动
				ulid.style.top=ulid.offsetTop+speed+'px';
				
				// 判断
				if(ulid.offsetTop<-ulid.offsetHeight/2)
				{
					ulid.style.top=0+'px';	// 拉上去一半，即滚动一次；
				}
				else if (ulid.offsetTop>0)
				{
					ulid.style.top=-ulid.offsetHeight/2+'px';
				}
			},50)
			
			// 鼠标经过
			ulid.onmouseover = function (){
				clearInterval(timer)
			};
			
			// 移出鼠标
			ulid.onmouseout = function (){
				timer=setInterval(function (){
					ulid.style.top=ulid.offsetTop+speed+'px';
					if(ulid.offsetTop<-ulid.offsetHeight/2)
					{
						ulid.style.top=0+'px';
					}
					else if (ulid.offsetTop>0)
					{
						ulid.style.top=-ulid.offsetHeight/2+'px';
					}
				},50)
			};
		}
		
		// step3: js
		window.onload = function() {
			// 元素滚动
			elementRoll();
		}
	</script>
	
	<style type="text/css">
		/*step2: css*/
		* {
			/*important*/
			margin: 0;
			padding: 0;
		}
		
		.outerdiv {
			margin-top: 100px;
			margin-left: 100px;
			
			/*important: 溢出隐藏；*/
			overflow:hidden;
		}
			
		.innerdiv {
			width: 230px;
			height: 135px;
			border: 2px solid #000000;
			
			/*important：相对位置；*/
			position:relative; 
		}
		
		.ulel {
			list-style-type: none;
			width: 228px;
				
			/*important: 设置绝对定位，top属性；*/
			position: absolute;
			top: 0;
		}
		
		.ulel li {
			margin-left: 10px;
		}
	</style>
</head>

<body>

	<!--step1: html dom-->
	<div class="outerdiv">
		<div class="innerdiv">
			<ul id="ulid" class="ulel">
				<li>星期天</li>
				<li>星期一</li>
				<li>星期二</li>
				<li>星期三</li>
				<li>星期四</li>
				<li>星期五</li>
				<li>星期六</li>
			</ul>
		</div>
	</div>
	
</body>
</html>