貌似克隆沒有用啊,之前用這個做過一個聯(lián)系沒問題,今天重新來看,出問題了,耐心滾動看一下,求解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滾動</title>
<style>
*{
? ? margin: 0;
? ? padding: 0;
} ? ?
a {
? ? color: #333;
? ? text-decoration: none; ? ? /* 超鏈接樣式 */
}
#main{ width: 300px; height:200px; overflow:hidden;position: relative; margin: 5px; border: 1px solid #000; }
#con li{ height: 24px; line-height: 24px; overflow:hidden; padding-left: 10px;}
#con li a{ text-decoration: none; color: #333; }
</style>
</head>
<body>
<div id="main">
<ul id="con">
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域1</a></li>
<li><a href="#">滾動區(qū)域這里是滾動區(qū)域這里是滾動區(qū)域2</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域這里是滾動</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">滾動區(qū)域這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域這里是滾動</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
? ? ? ? ? ? <li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域5</a></li>
<li><a href="#">滾動區(qū)域這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域這里是滾動</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">滾動區(qū)域這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域這里是滾動</a></li>
<li><a href="#">這里是滾動區(qū)域這里是滾動區(qū)域</a></li>
</ul>
? ? ? ? <ul id="kelon"></ul>
</div>
? ? <script>
var area = document.getElementById("main");
var con = document.getElementById("con");
var kelon = document.getElementById("kelon");
kelon.innerHTML = con.innerHTML;
var time = 50;
function scrollH(){
if (area.scrollTop >= con.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
var scroll = setInterval("scrollH()",time);
area.onmouseover = function(){
clearInterval(scroll);
}
area.onmouseout = function(){
scroll = setInterval("scrollH()",time);
}
</script>
</body>
</html>