Js中 关于top、clientTop、scrollTop、offsetTop等

来源:互联网 发布:展板设计软件 编辑:程序博客网 时间:2024/06/16 16:24

http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html




一个重要的实例,选摘处忘记了


<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>picture auto scroll</title></head><style type="text/css"><!--body {text-align: center;margin: 0 auto;}TD {FONT-SIZE: 12px;}ul,li,img {padding: 0;margin: 0;border: 0;list-style: none;}ul {width: 168px;margin: 0 auto;}ul li {width: 49.8%;float: left;padding: 4px 0;}ul li img {width: 66px;height: 23px;}</style></head><body><div style="margin: 5px; padding: 3px;"></div><div id=link_logostyle="OVERFLOW: hidden; margin: 0 auto; WIDTH: 160px; HEIGHT: 235px"><div id=link_logo1 style="OVERFLOW: hidden"><ul><li><a href="#" target=_blank><imgsrc="images/1.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgsrc="images/2.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/3.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgsrc="images/4.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/5.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/6.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgsrc="images/7.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/8.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/9.gif" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/10.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/11.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/12.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/13.gif" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/14.jpg" /></a></li><li><a href="#" target=_blank><imgsrc="images/15.jpg" alt="CSS" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/16.jpg" /></a></li><li><a href="#" target=_blank><imgsrc="images/17.jpg" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/18.gif" /></a></li><li><a href="#" target=_blank><imgsrc="images/19.gif" alt="CSS" /></a></li><li><a href="#" target=_blank><imgalt="CSS" src="images/20.gif" /></a></li></ul></div><div id=link_logo2></div></div><script>var speed = 65link_logo2.innerHTML = link_logo1.innerHTMLfunction Marquee2() {if (link_logo2.offsetTop - link_logo.scrollTop <= 0)link_logo.scrollTop -= link_logo1.offsetHeightelse {link_logo.scrollTop++}}var MyMar2 = setInterval(Marquee2, speed)link_logo.onmouseover = function() {clearInterval(MyMar2)}link_logo.onmouseout = function() {MyMar2 = setInterval(Marquee2, speed)}</script><br><br><br><br></body></html>