欺骗眼球的滚动条 (javascript)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8" /> 6 <style type="text/css"> 7 #wrap{ 8 width: 700px; 9 height: 100px; 10 position: absolute; 11 left: 100px; 12 background-color: red; 13 overflow: hidden; 14 } 15 #ins{ 16 width: 800px; 17 height: 100px; 18 position: absolute; 19 overflow: hidden; 20 } 21 .li{ 22 width: 100px; 23 height: 100px; 24 float: left; 25 position:relative; 26 } 27 .ll{ 28 width: 100px; 29 height: 100px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="wrap"> 35 <div id="ins"> 36 <div class="li"><div class="ll" style="background:skyblue"></div></div> 37 <div class="li"><div class="ll" style="background:blue"></div></div> 38 <div class="li"><div class="ll" style="background:gray"></div></div> 39 <div class="li"><div class="ll" style="background:yellow"></div></div> 40 <div class="li"><div class="ll" style="background:pink"></div></div> 41 <div class="li"><div class="ll" style="background:brown"></div></div> 42 <div class="li"><div class="ll" style="background:red"></div></div> 43 <div class="li"><div class="ll" style="background:black"></div></div> 44 </div> 45 </div> 46 </body> 47 </html> 48 <script type="text/javascript"> 49 var li=document.getElementsByClassName('li'); 50 var ins=document.getElementById('ins'); 51 var timer=null; 52 var max=ins.offsetLeft; 53 timer=setInterval(function(){ 54 var lex=ins.offsetLeft; 55 if((lex+li[0].offsetWidth)<=1){ 56 ins.appendChild(li[0]); 57 ins.style.left=max+"px" 58 59 } 60 ins.style.left=ins.offsetLeft-1+"px"; 61 62 } 63 ,5) 64 </script>
利用appendChild抽出头元素添加到末尾的特性加上重置位置 欺骗眼球达到效果
