模拟谷歌今天的包袱做的小玩意

最新推荐文章于 2021-08-17 07:46:11 发布

Joe?

最新推荐文章于 2021-08-17 07:46:11 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/xiao-yao/archive/2012/04/09/2439004.html

版权

 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>