码迷,mamicode.com
首页 > 其他好文 > 详细

运动回调-链式运动

时间:2014-05-30 00:18:59      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

bubuko.com,布布扣
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
 8 </style>
 9 <script>
10 window.onload = function() {
11     
12     var oDiv1 = document.getElementById(div1);
13     
14     oDiv1.onclick = function() {
15         
16         startMove(this, {
17             width : 200
18         }, 10, function() {
19             startMove(this, {
20                 height : 200
21             }, 10);
22         });
23     }
24     
25     function startMove(obj, json, iSpeed, fn) {
26         clearInterval(obj.iTimer);
27         var iCur = 0;
28             
29         obj.iTimer = setInterval(function() {
30             
31             var iBtn = true;
32                         
33             for ( var attr in json ) {
34                                 
35                 var iTarget = json[attr];
36                 
37                 if (attr == opacity) {
38                     iCur = Math.round(css( obj, opacity ) * 100);
39                 } else {
40                     iCur = parseInt(css(obj, attr));
41                 }
42                 
43                 if (iCur != iTarget) {
44                     iBtn = false;
45                     if (attr == opacity) {
46                         obj.style.opacity = (iCur + iSpeed) / 100;
47                         obj.style.filter = alpha(opacity=+ (iCur + iSpeed) +);
48                     } else {
49                         obj.style[attr] = iCur + iSpeed + px;
50                     }
51                 }
52                 
53             }
54             
55             if (iBtn) {
56                 clearInterval(obj.iTimer);
57                 fn && fn.call(obj);
58             }
59             
60         }, 30);
61     }
62     
63     function css(obj, attr) {
64         if (obj.currentStyle) {
65             return obj.currentStyle[attr];
66         } else {
67             return getComputedStyle(obj, false)[attr];
68         }
69     }
70     
71 }
72 </script>
73 </head>
74 
75 <body>
76     <div id="div1"></div>
77 </body>
78 </html>
bubuko.com,布布扣

 

运动回调-链式运动,布布扣,bubuko.com

运动回调-链式运动

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/trtst/p/3757966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!