模拟谷歌今天的包袱做的小玩意
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>
代码中的图片我使用的是谷歌所带的图片，不知道今天过后该地址是否还生效，所以附上图片，改为相对地址即可。
代码简单且粗鲁，大家看着玩就好了，菜鸟一只，见笑了。。。
谷歌包袱效果，载入较慢，请稍等。
