继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

js无缝滚动

android开发学习视频
关注TA
已关注
手记 304
粉丝 52
获赞 322

js无缝滚动:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		*{margin: 0;padding:0;}		ul,li{list-style: none;}		#main{			width:400px;			 height: 100px;			border: 4px solid #ddd;			background: #fff; 			margin: 0 auto;			overflow: hidden;		}		#main h1{border-bottom: 4px solid #000;background: pink}		#area{ overflow: hidden;height:100% }	</style></head><body>	<div id="main">		<h1>无缝滚动</h1>		<div id="area">			<ul id="ul1">				<li>1.西游记</li>				<li>2.红楼梦</li>				<li>3.西厢记</li>				<li>4.鹿鼎记</li>				<li>5.石头记</li>				<li>6.水浒传</li>			</ul>			<ul id="ul2"></ul>		</div>	</div>	<script type="text/javascript">			var area=document.getElementById("area");			var ul1=document.getElementById("ul1");			var ul2=document.getElementById("ul2");			ul2.innerHTML=ul1.innerHTML;//克隆一个ul			function scrollUp(){				if(area.scrollTop>=ul1.offsetHeight){					area.scrollTop=0;				}else{					area.scrollTop++;				}			}			var myScroll=setInterval("scrollUp()",50);			area.onmouseover=function(){				clearInterval(myScroll);			}			area.onmouseout=function(){				myScroll=setInterval("scrollUp()",50);			}	</script></body></html>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP