JavaScript实现元素属性的缓冲变化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript实现元素属性的缓冲变化相关的知识,希望对你有一定的参考价值。

---------------------------------------------------

今天给大家分享一个用javascript实现

元素的属性缓冲变化效果,代码如下:

---------------------------------------------------

 1 //获取样式
 2 function getStyle( obj, attr ){  //封装的获取元素样式的函数;
 3 
 4     if(obj.currentStyle){
 5 
 6         return obj.currentStyle[attr];
 7 
 8     }else{
 9 
10         return getComputedStyle(obj,false)[attr];
11     }
12 }

 

 1 function Slow_change( obj, attr, tar, fn ){  //opacity范围为1~100;
 2     clearInterval(obj.timer);  //清除定时器;
 3     obj.timer  = setInterval(function(){
 4         let cur = 0;
 5         if(attr == ‘opacity‘){  //获取要改变的样式;透明度分开来实现;
 6             cur = parseInt(parseFloat(getStyle(obj,attr))*100);  //取整;
 7         }else{
 8             cur = parseInt(getStyle(obj,attr));
 9         };
10         let speed = (tar - cur)/8;//大于1的整数
11         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //根据速度的正负向上和向下取整;
12         if( cur == tar ){
13             clearInterval(obj.timer);  //达到预定值时清除定时器;
14             if(attr == ‘opacity‘){
15                 obj.style.filter = ‘alpha(opacity:‘+ cur +‘)‘;
16                 obj.style.opacity = cur/100;
17             }else{
18                 obj.style[attr] = tar + ‘px‘;
19             }
20             fn && fn();  //调用回调函数;
21         }else{
22             if(attr == ‘opacity‘){
23                 obj.style.filter = ‘alpha(opacity:‘ + (cur+speed) + ‘)‘;
24                 obj.style.opacity = (cur+speed)/100;
25             }else{
26                 obj.style[attr] = cur + speed + ‘px‘;  //设置变化后的样式;
27             }
28         }
29     },30);    
30 }

--------------------------------------------------

上面就是封装好的缓冲变化函数,通过

出入不同的对象和属性产生不同的缓冲

变化,下面给出一个实例完整的代码:

--------------------------------------------------

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <style type="text/css">
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         #box{
12             position:absolute;
13             width:100px;
14             height:100px;
15             background:red;
16             border:1px solid black;
17         }
18     </style>
19     <script type="text/javascript">
20         window.onload = function(){
21             function getStyle( obj, attr ){
22 
23                 if(obj.currentStyle){
24 
25                     return obj.currentStyle[attr];
26 
27                 }else{
28 
29                     return getComputedStyle(obj,false)[attr];
30                 }
31             }
32 
33             function Slow_change( obj, attr, tar, fn ){
34                 clearInterval(obj.timer);
35                 obj.timer  = setInterval(function(){
36                     let cur = 0;
37                     if(attr == opacity){
38                         cur = parseInt(parseFloat(getStyle(obj,attr))*100);
39                     }else{
40                         cur = parseInt(getStyle(obj,attr));
41                     };
42                     let speed = (tar - cur)/8;
43                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
44                     if( cur == tar ){
45                         clearInterval(obj.timer);
46                         if(attr == opacity){
47                             obj.style.filter = alpha(opacity:+ cur +);
48                             obj.style.opacity = cur/100;
49                         }else{
50                             obj.style[attr] = tar + px;
51                         }
52                         fn && fn();
53                     }else{
54                         if(attr == opacity){
55                             obj.style.filter = alpha(opacity: + (cur+speed) + );
56                             obj.style.opacity = (cur+speed)/100;
57                         }else{
58                             obj.style[attr] = cur + speed + px;
59                         }
60                     }
61                 },30);    
62             }
63 
64             var box = document.getElementById(box);
65             Slow_change( box,left,500,function(){
66                 alert(1);
67             });
68         };
69     </script>
70 </head>
71 <body>
72     <div id="box"></div>
73 </body>
74 </html>

--------------------Over---------------------

感谢大家的阅读

-----------------------------------------------

 

以上是关于JavaScript实现元素属性的缓冲变化的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript笔试题(js高级代码片段)

transition啥意思

transition属性是啥意思

JavaScript——WEBAPIS_自定义属性,以及节点操作

js的运动及封装

[Go] 通过 17 个简短代码片段,切底弄懂 channel 基础