JS 无缝滚动 走马灯
浏览数：26 /
时间：2015年06月09日
<!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就是指横向滚动条滚动后，左边不可见的那部分的宽度
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
