标签：style blog http color io ar div cti html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> * { margin:0; padding:0; } #demo { overflow: hidden; /* 必须加上 hideen 才能滚动*/ width: 840px; margin:50px auto; } #demo img { border: 1px solid red; margin-right: 20px; } #indemo { float: left; width: 800%; border:1px dashed #000; } #demo1 { float: left; } #demo2 { float: left; } </style> </head> <body> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> var speed = 15; var tab = document.getElementById("demo"); var tab1 = document.getElementById("demo1"); var tab2 = document.getElementById("demo2"); tab2.innerHTML = tab1.innerHTML; function Marquee() { if (tab2.offsetWidth - tab.scrollLeft <= 0) tab.scrollLeft -= tab1.offsetWidth; else { tab.scrollLeft++; } } var MyMar = setInterval(Marquee, speed); tab.onmouseover = function () { clearInterval(MyMar) }; tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) }; </script> </body> </html>
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
scrollLeft就是指横向滚动条滚动后，左边不可见的那部分的宽度
标签：style blog http color io ar div cti html
原文地址：http://www.cnblogs.com/lxpursue/p/3930683.html
