【js】列表滚动原理

<div id=”Main” style=”border:2px solid #D8CDAB;overflow:hidden;height:494;width:174;background:#ffffff;”>

<div id=”List01″>
<ul>
<li>
</li>
</ul>
</div>
<div id=”List02″> </div>
</div>

<script>

var speed = 20;

var Main = document.getElementById(“Main”);
var List01 = document.getElementById(“List01”);
var List02 = document.getElementById(“List02”);

List02.innerHTML = List01.innerHTML;

function AddMove(){
if(List02.offsetTop – Main.scrollTop <=0){
Main.scrollTop -= List01.offsetHeight;
} else {
Main.scrollTop++;
}
}

var MyMove=setInterval(AddMove,speed);
Main.onmouseover=function() {clearInterval(MyMove); }
Main.onmouseout=function() {MyMove=setInterval(AddMove,speed);}

</script>

效果图:

Author: jhonse

Jhonse技术博客: http://blog.jhonse.com

Leave a Reply

Your email address will not be published. Required fields are marked *