js無縫滾動

joytoy發表於2021-09-09
JS

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>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4650/viewspace-2815702/，如需轉載，請註明出處，否則將追究法律責任。

相關文章