<!DOCTYPE HTML>
<html>
<!-- 自主學習 來自慕客網 vivian老師的視頻教學 連接 http://www.imooc.com/learn/17 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<head>
<style type="text/css">
ul{
/*不要margin否則滾動 會有縫隙*/
margin:0;
}
div {
/*overflow hidden·否則無法蓋住下面的內容*/
overflow: hidden;
width: 75px;
height: 100px;
margin-left: 29%;
margin-top: 10%;
background: aqua;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無縫滾動</title>
</head>
<body>
<div id="ca">
<ul id="c1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="c2"></ul>
</div>
</body>
<script language="javascript" type="text/javascript">
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var ca=document.getElementById("ca");
/*將第一個ul的值賦值給第二個 當第一個頭部消失時 由第二個來顯示*/
c2.innerHTML=c1.innerHTML;
var cas=null;
window.onload=function(){
st();
}
cas=setInterval('st()',50);
function st(){
//clearInterval(cas);
/*如果滾動長度大於第一個ul的高度 就需要將第一個ul回到原處 */
if(ca.scrollTop>=c1.offsetHeight){
ca.scrollTop=0;
}else{
ca.scrollTop++;
}
/*鼠標移入就清除清除定時器*/
ca.onmouseover=function() {
clearInterval(cas);
}
ca.onmouseout=function() {
cas=setInterval('st()',50);
}
}
</script>
</html>
