缓存动画2

Posted 2022-04-28 zhangzhengyang

 1 <script>
 2     myTool.$(‘btn1‘).onclick = function () 
 3         // myTool.$(‘box‘).style.background = ‘green‘;
 4         myTool.changeCssStyle(myTool.$(‘box‘), ‘background‘, ‘green‘);
 5     ;
 6 
 7     myTool.$(‘btn2‘).onclick = function () 
 8         // myTool.$(‘box‘).style.width = ‘1000px‘;
 9         myTool.changeCssStyle(myTool.$(‘box‘), ‘width‘, ‘1000px‘)
10     ;
11 
12     changeCssStyle (eleObj, attr, value) 
13             eleObj.style[attr] = value;
14         
15 </script>

1 console.log(myTool.getStyleAttr(box, ‘width‘));
2 console.log(myTool.getStyleAttr(box, ‘height‘));
3 console.log(myTool.getStyleAttr(box, ‘border‘));
4 console.log(myTool.getStyleAttr(box, ‘backgroundColor‘));

不需要是行内

1   getStyleAttr(obj, attr) 
2             if (obj.currentStyle)  // IE 和 opera
3                 return obj.currentStyle[attr];
4              else 
5                 return window.getComputedStyle(obj, null)[attr];
6             
7  

 1 <script>
 2     window.addEventListener(‘load‘, function (ev) 
 3         var box = myTool.$(‘box‘);
 4 
 5         myTool.$(‘btn‘).addEventListener(‘click‘, function () 
 6             buffer(box, ‘left‘, 800);
 7         );
 8 
 9         myTool.$(‘btn1‘).addEventListener(‘click‘, function () 
10             buffer(box, ‘width‘, 800);
11         );
12     );
13 
14     /**
15      *  缓动动画函数
16      * @param ObjecteleObj
17      * @param Stringattr
18      * @param String | Numbertarget
19      */
20     function buffer(eleObj, attr, target) 
21         // 1.1 先清后设
22         clearInterval(eleObj.timer);
23 
24         // 1.2 定义变量
25         var speed = 0, begin;
26 
27         // 1.2 设置定时器
28         eleObj.timer = setInterval(function () 
29             // 获取要做动画属性的初始值  parseInt字符串转数字
30             begin = parseInt(myTool.getStyleAttr(eleObj, attr));
31             console.log(‘begin:‘ + begin);
32 
33 
34             // 2.3 求出步长
35             speed = (target - begin) * 0.2;
36             speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
37 
38             // 2.4  动起来
39             eleObj.style[attr] = begin + speed + ‘px‘;
40             eleObj.innerText = begin;
41 
42             // 2.5 清除定时器
43             if (begin === target) 
44                 clearInterval(eleObj.timer);
45             
46         , 20);
47     
48 </script>