适用于CSS2的各种运动的javascript运动框架

Posted 2020-07-25 ZinCode

 1    <script>
 2     window.onload = function() {
 3             //var oDiv1 = document.getElementById(‘box1‘);
 4             //var oDiv2 = document.getElementById(‘box2‘);
 5             // oDiv1.timer = null;
 6             var oDiv = document.getElementsByTagName(‘div‘);
 7             
 8             for (var i = 0; i < oDiv.length; i++) {
 9                 oDiv[i].timer = null;
10                 oDiv[i].onmouseover = function() {
11                     var that = this;                                    //闭包的关系，把this传递过去
12                     startMove(this, {‘width‘: 205, ‘height‘: 500},function(){
13                         startMove(that, {‘opacity‘: 100});
14                     });
15                     //alert(getStyle(this,‘opacity‘))
16                 }
17                 oDiv[i].onmouseout = function() {
18                     var that = this;
19                     startMove(this, {‘width‘: 200,‘height‘:200}, function(){
20                         startMove(that, {‘opacity‘: 30});
21                     });
22                 }
23             }
24         }
25         //var timer = null;
26     function getStyle(obj,name){　　　　　　　　　　//获取样式的函数
27         if(obj.currentStyle){
28             return obj.currentStyle[name];    //这里用这种形式的原因是name是以字符串的形式传递过来的
29         } else{
30             return getComputedStyle(obj,false)[name];       //得到加上边框的总宽
31         }
32     }
33     //startMove(onj,{width: 200, height: 200}, fnEnd)
34     function startMove(obj, json, fnEnd) {
35         clearInterval(obj.timer);
36         obj.timer = setInterval(function() {
37             var bStop = true;                   //开了定时器之后设立一个假设：所有运动都停止了，那些把假设设到定时器外面的都是错误的方法
38             for(var attr in json){
39             var cur = 0;
40             if(attr == "opacity"){
41                 cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);     //要取整
42             } else {
43                 cur = parseInt(getStyle(obj,attr))
44             }
45             var speed = (json[attr] - cur) / 10; //
46             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
47             if (cur !== json[attr]) {               //如果某次循环的值不等于目标值，
48                 bStop = false;                          //假设不成立
49             };
50                 if (attr == "opacity"){       
51                 obj.style.opacity = (speed + cur)/100;
52                 obj.style.filter = ‘alpha(opacity:‘+ (speed + cur) +‘)‘;
53                 } else{
54                     obj.style[attr] = cur + speed + ‘px‘;
55                 }      
56         }
57         if(bStop){                                          //所有的假设都成立了，才关闭定时器
58             clearInterval(obj.timer);
59             if(fnEnd) fnEnd();                              //如果有回调函数，则执行回掉函数
60         }
61         }, 30)
62     }
63     </script>

html代码

1  <div id="box1"></div>
2  <div id="box2"></div>

css代码

1  div {
2         width: 200px;
3         height: 200px;
4         background: purple;
5         border: 10px solid maroon; 
6         margin-top: 10px;
7         opacity: 0.3;
8         filter: alpha(opacity: 30);
9     }

 全手打，亲测可用，支持多物体，多属性，链式，同时运动。