简易运动框架

简易的运动框架可以用来控制长宽高、位置、透明度，结合定时器可以实现简单的动画。

其中最主要也是最基础的就是获得元素的属性，我们先来看一下给元素添加样式的三种方法：行内样式、嵌入式样式、外链样式表

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- 外部样式表 -->
 7     <link style="stylesheet" href="style.css" type="text/css" />
 8     <!-- 嵌入样式 -->
 9     <style>
10         div{
11             height: 200px;
12         }
13     </style>
14 </head>
15 <body>
16     <!-- 行内样式 -->
17     <div style="width:200px;"></div>
18 </body>
19 </html>

 

我们要获取元素的样式可以使用 obj.style.xx,但是这个方法只能获取行内样式。

1     <script>
2         var oBox = document.getElementById('box');
3         console.log(oBox.style.width);//200px
4 
5         console.log(oBox.style.height);//''
6     </script>

所以我们要想获得元素的样式，style是不够的所以引用了currentStyle（IE）方法和getComputedStyle方法

定义一个获取元素样式的通用函数：

1         function getStyle(obj,attr){
2             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
3         };

开始写doMove函数

首先doMove接受的参数

1 doMove(obj,attr,dir,target,endFn)

obj是要进行操作的对象

attr是要操作的属性

dir是要改变元素属性的速度（在一段时间内改变多少）

target属性改变的目标值

endFn是回调函数

首先，我们先要判断dir的正负，如果元素现在的属性值要是小于目标值则attr为正，否则为负数

注意：用getStyle()函数返回的是字符串，所以要用parseInt转换为数字

1             dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;

然后定义主要的运动函数

 1             obj.timer = setInterval(function (){
 2                 //下一个位置的变化
 3                 var speed = parseInt(getStyle(obj,attr)) + dir;
 4                 //超过目标值时，speed改为目标值
 5                 if(speed > target && dir > 0 || speed < target && dir < 0){
 6                     speed = target;
 7                 };
 8                 obj.style[attr] = speed + 'px';
 9                 if(speed == target){
10                     clearInterval(obj.timer);
11                     endFn && endFn();
12                 };
13             },20);

speed = 元素属性当前的值 + 要每段时间的变化，判断改变后的值speed是否大于或者小于目标值target，如果大于或者小于目标值，则speed等于目标值，否则继续执行。

如果speed等于目标值则停止对元素属性的更改，清楚定时器，如果有回调函数则执行。

最后定义对透明度改变的函数：

 1          function chOpacity(obj,speed,target,endFn){
 2              //取得最初值,要用parseInt不然得到的opacity属性是字符串
 3              var oropacity = parseInt(getStyle(obj,'opacity'));
 4 
 5              //定时器
 6             obj.chopacity = null;
 7             //判断正负
 8             speed = oropacity > target ? -speed : speed;
 9 
10             clearInterval(obj.chopacity);
11 
12             obj.chopacity = setInterval(function(){
13                 
14                 obj.style.opacity = oropacity += speed;
15 
16                 if(obj.style.opacity < 0){
17                     obj.style.opacity = 0;
18                     clearInterval(obj.chopacity);
19                     endFn && endFn();
20 
21                 }
22                 if(obj.style.opacity > 1){
23                     obj.style.opacity  = 1;
24                     clearInterval(obj.chopacity);
25                     endFn && endFn();
26                 }
27             },40);
28             
29         }

基本思想和doMove（）函数差不多。这里就不在讲了。

应用：

实现这个动画效果的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="doMove.js"></script>
    <style>
    #box{
        width:800px;
        height: 60px;
        border: 1px solid black;
        position: absolute;
        top: 300px;
        left: 150px;
        opacity: 1;
        line-height: 60px;
    }
    #box2{
        width: 800px;
        height: 60px;
        position: absolute;
        background: green;
        top: 0px;
        left: 0px;
    }
    span{
        display: inline-block;
        width: 90px;
        position: absolute;
        top:10px;
    }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script>
    window.onload = function(){
            var timer = null;
            var oSpan = document.getElementsByTagName('span');
            var oBox = document.getElementById('box');
            var oBox2 = document.getElementsByTagName('div');
            var num = 0;
            var len = 8;
            var str = '';

            for(var i=0;i<len;i++){
                str += '<span style="width:90px;position:absolute;top:0px;left:'+i*110+'px">+1</span>';
            }
            str += '<div style="width: 0px;height: 60px;position: absolute;background: rgb(100,100,100);top: 0px;left: 0px; "></div>'
            oBox.innerHTML = str;

            oBox.onclick = function(){
                clearInterval(timer);
                timer = setInterval(function(){
                    doMove(oSpan[num],'top',2,-150);
                    doMove(oBox2[1],'width',23,800，function(){chOpacity(oBox2[1],0.08,0);});
                    chOpacity(oSpan[num],0.040,0);
                    num++;
                    if(num == oSpan.length){
                        clearInterval(timer);

                    }
                },40);
            }

    }
    </script>
</body>
</html>

 doMove函数

 1         function doMove(obj,attr,dir,target,endFn){
 2             //判断数值的正负，如果目标值大于当前值则为正
 3             dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
 4 
 5             clearInterval(obj.timer);
 6 
 7             obj.timer = setInterval(function (){
 8                 //下一个位置的变化
 9                 var speed = parseInt(getStyle(obj,attr)) + dir;
10                 //超过目标值时，speed改为目标值
11                 if(speed > target && dir > 0 || speed < target && dir < 0){
12                     speed = target;
13                 };
14                 obj.style[attr] = speed + 'px';
15                 if(speed == target){
16                     clearInterval(obj.timer);
17                     endFn && endFn();
18                 };
19             },20);
20         };
21 
22          function chOpacity(obj,speed,target,endFn){
23              //取得最初值,要用parseInt不然得到的opacity属性是字符串
24              var oropacity = parseInt(getStyle(obj,'opacity'));
25 
26              //定时器
27             obj.chopacity = null;
28             //判断正负
29             speed = oropacity > target ? -speed : speed;
30 
31             clearInterval(obj.chopacity);
32 
33             obj.chopacity = setInterval(function(){
34                 
35                 obj.style.opacity = oropacity += speed;
36 
37                 if(obj.style.opacity < 0){
38                     obj.style.opacity = 0;
39                     clearInterval(obj.chopacity);
40                     endFn && endFn();
41 
42                 }
43                 if(obj.style.opacity > 1){
44                     obj.style.opacity  = 1;
45                     clearInterval(obj.chopacity);
46                     endFn && endFn();
47                 }
48             },40);
49             
50         }
51 
52         function getStyle(obj,attr){
53             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
54         };

 

posted @ 2016-11-17 23:18  老板丶鱼丸粗面  阅读(1073)  评论(2)  编辑  收藏  举报