Web_JavaScript_列表元素滚动;

该博客介绍了如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值