---------------------------------------------------
今天给大家分享一个用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---------------------
感谢大家的阅读
-----------------------------------------------
时间： 2024-10-09 01:10:49