1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>谷歌包袱效果</title> 6 <style type="text/css"> 7 .classicScrollBox{width:9000px; height:54px; position:absolute; left:0; } 8 .classicScrollBox img{width:804px; height:54px; float:left;} 9 .item1{width:804px; height:54px; overflow:hidden; position:relative;} 10 </style> 11 </head> 12 13 <body> 14 <div class = "item1"> 15 <div id="classicScrollBox" class = "classicScrollBox"> 16 <img src="http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg" alt=""> 17 <img src="http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg" alt=""> 18 </div> 19 </div> 20 <script type="text/javascript"> 21 var scrollBox = document.getElementById("classicScrollBox"); 22 var num_record = 0;//起止位置計算 23 var num_motion = 1000;//動畫執行間隔 24 var num_motionTime = 5;//動畫緩動係數 25 window.onload = function(){ 26 function scrolls(){ 27 scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px'; 28 num_record += 67; 29 if(num_record == 804){ 30 scrollBox.style.left = 0 + 'px'; 31 num_record = 0; 32 } 33 num_motionTime = Math.ceil(num_motion/100); 34 if (num_motionTime == 0) { 35 num_motionTime = 1; 36 } 37 if (num_motion != 40) { 38 num_motion -= 10*num_motionTime; 39 } 40 setTimeout(scrolls,num_motion); 41 } 42 setTimeout(scrolls,num_motion); 43 } 44 </script> 45 </body> 46 </html>
代碼中的圖片我使用的是谷歌所帶的圖片，不知道今天過後該地址是否還生效，所以附上圖片，改爲相對地址即可。
代碼簡單且粗魯，大家看着玩就好了，菜鳥一隻，見笑了。。。
谷歌包袱效果，載入較慢，請稍等。
轉載於:https://www.cnblogs.com/xiao-yao/archive/2012/04/09/2439004.html