前端基本功,原生JS实现动画函数的封装

2020-04-23 作者:网站首页   |   浏览(157)

时间: 2019-12-21阅读: 86标签: 封装

动画原理

图片 1

动画基本原理.gif

人走路的时候, 步长
动画的基本原理 : 让盒子的 offsetLeft 步长

盒子 原来的位置 0 10 盒子现在的offsetLeft 10

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。

动画基本原理的完整源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button>开始</button>
<div></div>
</body>
</html>
<script>
    //动画的基本原理   盒子的 offsetLeft     步长
    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function() {
       timer = setInterval(function() {
           if(div.offsetLeft > 400)
           {
               clearInterval(timer);
           }
           div.style.left = div.offsetLeft   10    "px";
       },20);
    }
</script>

获取元素的属性的函数并进行了兼容性处理:

JS取绝对值:

Math.abs(-5) 取绝对值函数

|-5| = 5

function getStyle(obj, attr) { if(obj.currentStyle){ //IE浏览器 return obj.currentStyle[attr]; }else{ //chrome、firefox等浏览器 return getComputedStyle(obj,null)[attr]; }}

1/基本动画函数

图片 2

基本动画函数.gif

动画函数:

基本动画函数完整源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="run"></div>
</body>
</html>
<script>
    function $(id) {return document.getElementById(id)}
    $("btn200").onclick = function() {
        animate($("run"),200);  // animate 自定义函数
        // 第一个参数  谁做动画    第二参数目标位置
    }
    $("btn400").onclick = function() {
        animate($("run"),400);
    }
    var arr = [];
    arr.index = 10;   // 自定 属性  arr 的 index  arr 专属
    var index = 20; // 变量   miss 自由的  任何人都可以使用
    // 运动函数
   /* for(var i=0; i<lis.length;i  )
    {
        lis[i].index = i;
    }*/
    function animate(obj,target){
        obj.timer = setInterval(function() {  // 开启定时器
            if(obj.offsetLeft > target)
            {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft   10   "px";
        },30)
    }
</script>
var timer = null; // 声明一个timer来存储定时器function animate(obj, Obj, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { /* * 当我们改变多个属性时,如果其中一个属性已经达到目标值,就会清除定时器,就会导致其他没有达到目标值的属性也会停止 * 为了解决这个问题,我们声明一个节流阀flag,让它为true * 判断是否还有没达到目标值的属性,如果还有,就让flag为false(关闭节流阀),让定时器继续执行 * 当所有属性都达到了目标值时,才执行清除定时器那一步 */ var flag = true; for(var attr in Obj) { // for...in...遍历对象 var icur = 0; // 存储获取过来的属性值 if(attr == 'opacity') { // 判断获取过来的属性是否为opacity icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); // float会有小误差,所以需要四舍五入一下 } else { icur = parseInt(getStyle(obj, attr)); // 获取过来的值可能带单位,所以需要用到parseInt() } var speed = (Obj[attr] - icur) / 10; // 速度 逐渐变慢(也可以设为固定值实现匀速运动) speed = speed  0 ? Math.ceil(speed) : Math.floor(speed); // speed并不总是整数,会导致和目标值不相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整 if(icur != Obj[attr]) { // 判断是否还有属性没有达到目标值 flag = false; } if(attr == 'opacity') { // opacity是没有单位的,所以在这里需要判断一下 obj.style.filter = 'alpha(opacity = '  (icur   speed)  ')'; obj.style.opacity = (icur   speed) / 100; // opacity别忘了除以100 } else { obj.style[attr] = icur   speed   'px'; // 原来的值加上速度赋值给属性 } } if(flag) { // 当所有属性都达到目标值,即flag为true时,再停止定时器 clearInterval(obj.timer); callback  callback(); // 判断是否有回调函数,有的话就执行 } }, 25)}

2/匀速运动封装函数

图片 3

匀速运动封装.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #box1 {
            position: absolute;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    var box1 = document.getElementById("box1");
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    btn200.onclick = function() {
        animate(box,200);
        animate(box1,500);
    }
    btn400.onclick = function() {
        animate(box,400);
    }
    //  封装匀速运动
    function animate(obj,target){
        clearInterval(obj.timer);  // 先清除定时器
        var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断 应该    还是 -
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
            obj.style.left = obj.offsetLeft   speed   "px";
            if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了
            {
                clearInterval(obj.timer);
                obj.style.left = target   "px";  // 有5像素差距   我们直接跳转目标位置
            }
        },30)
    }
</script>

接下来我们来调用一下:

三个取整函数

这三个函数都是 数学函数
Math

Math.ceil() 向上取整 天花板

比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1

Math.floor() 向下取整 地板

比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2

Math.round() 四舍五入函数

console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2

var box = document.querySelector('.box'); box.addEventListener("mouseover", function() { animate(this, {width: 300, height: 200, opacity: 100}, function() { animate(box, {width: 200, height: 100, opacity: 30}); }); });

缓动动画原理

匀速动画的原理: 盒子本身的位置 步长
缓动动画的原理: 盒子本身的位置 步长 (不断变化的)

图片 4

缓动动画原理.gif

缓动动画原理的源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var target = 400;
    var timer = null;
    btn.onclick = function() {
         timer = setInterval(function() {
             // 盒子本身的位置     步长 (不断变化的)
             var step = (target - box.offsetLeft) / 10;   // 步长
             console.log(step);
             step =  step > 0 ? Math.ceil(step) : Math.floor(step);  // 步长取整
             box.style.left = box.offsetLeft   step   "px";
             if(box.offsetLeft == target) // 判断结束条件
             {
                 clearInterval(timer);
                 alert("到目标了")
             }
         },30)

    }
</script>

缓动动画封装

( 缺陷:只能水平方向!随后的“封装运动框架单个属性会进一步改进”)

图片 5

封装函数动画.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,200);
    }
    btn400.onclick = function() {
        animate(box,400);
    }
// 封装
    function animate(obj,target){  //  第一个参数 动谁   第二个参数  动多少
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
              // 计算步长   动画的原理    盒子本身的位置     步长
              var step = (target - obj.offsetLeft) / 10;  // 步长
              step =  step > 0 ? Math.ceil(step) : Math.floor(step);  //  取整步长
              // obj.style.left = 盒子本身的位置     步长
              obj.style.left = obj.offsetLeft   step   "px";
              if(obj.offsetLeft == target){
                  clearInterval(obj.timer);
              }
        },30)
    }

</script>

js 常用 访问 CSS 属性

我们访问得到css 属性,比较常用的有两种:

1. 利用点语法
   box.style.width      box.style.top    

点语法可以得到 width 属性 和 top属性 ** 带有单位的。 100px
但是这个语法有非常大的
缺陷**, 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w

2. 利用 [] 访问属性
  语法格式:  box.style[“width”]   

元素.style[“属性”];
attr 即代表属性

      console.log(box.style["left"]);

最大的优点 : 可以给属性传递参数

访问CSS属性的源码:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            left: 10px;
            position: absolute;
            top: 20px;
        }
    </style>
</head>
<body>
<div id="box" style="left:30px;width: 100px;height: 100px;"></div>
</body>
</html>
<script>
    var box =document.getElementById("box");
    console.log(box.style.left);
    console.log(box.style["left"]);
    function fn(attr){
        console.log(box.style[attr]);
    }
    fn("height");
    fn("width");
</script>

得到css 样式

我们想要获得css 的样式, box.style.left 和 box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?

  1. obj.currentStyle ie opera 常用

外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)

2 .window.getComputedStyle("元素", "伪类") w3c

两个选项是必须的, 没有伪类 用 null 替代

得到CSS样式源码 ie和opera 和w3c
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
            left: 10px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    console.log(demo.style.left);  // 得到的是空值   只能取行内
    //console.log(demo.currentStyle.left);  // ie这么写
    console.log(window.getComputedStyle(demo,null).left);
</script>

3 兼容写法 :

我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回该属性,所有继续封装返回当前样式的 函数。

得到css 样式兼容性写法:返回当前样式的函数★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 200px;
            position: absolute;
            top: 10px;
            left: 20px;
            background-color: pink;
            z-index: 2;
            opacity:  0.4;
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }

    console.log(getStyle(demo,"width"));
</script>

封装运动框架基本函数(单个属性)★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>

    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
       animate(box,"left",500);
    }
    btn400.onclick = function() {
        animate(box,"top",400);
    }
    // 封装单个属性的运动框架
    function animate(obj,attr,target)  {  // 给谁    什么属性   改为多少
         clearInterval(obj.timer);
         obj.timer = setInterval(function() {
             //计算步长   动画的原理      盒子本身的样式    步长
             //我们怎么知道我们当前的样式
            // 先得到 当前的样式,然后 用 target 减去 就可以  除以 10  计算步长
             var current = parseInt(getStyle(obj,attr));  // 得到当前的样式 别忘乐去掉px
             var step = ( target -current ) / 10;
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             // 要做动画了
             //obj.style.left =  obj.offsetLeft   step   "px";
             obj.style[attr] =  current    step   "px";
             if(current == target )
             {
                 clearInterval(obj.timer);
             }
             //console.log(current);
         } ,30)
    }


    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

JSON 遍历

for in 关键字
for ( 变量 in 对象)
{ 执行语句; }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var arr = [1,3,5,7,9];
    console.log(arr[3]);
    for(var i = 0; i< arr.length;i  )  // 遍历数组
    {
        console.log(arr[i]);
    }
    var json = {width:200,height:300,left:50}
    console.log(json.width);
    for(var k in json)
    {
        console.log(k);   // k 遍历的是json  可以得到的是  属性
        console.log(json[k]);  // json[k]  得到 是属性的  值
    }

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

千万要记得 每个 的意思 : 那是相当重要

k 是 属性
json[k] 得到的是属性值

封装运动框架基本函数(多个属性)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 800,left: 200});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架
    function animate(obj,json) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

封装运动框架基本函数(添加停止定时器)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 800,left: 200});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架
    function animate(obj,json) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
                console.log(current);
                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
            }



        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>    

flag在js中一般作为开关,进行判断。

回调函数

等动画执行完毕再去执行的函数回调函数
我们怎么知道动画就执行完毕了呢?
很简单当定时器停止了。 动画就结束了

图片 6

完整源码:
<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
           position: absolute;
           left: 0;
           top: 50px;
           border-radius: 50%;
       }
   </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
   var btn200 = document.getElementById("btn200");
   var btn400 = document.getElementById("btn400");
   var box = document.getElementById("box");
   btn200.onclick = function() {
       animate(box,{width: 200, top: 800,left: 200},function(){alert("我来了")});
   }
   btn400.onclick = function() {
       animate(box,{top:500});
   }
   // 多个属性运动框架  添加回调函数
   function animate(obj,json,fn) {  // 给谁    json
       clearInterval(obj.timer);
       obj.timer = setInterval(function() {
           var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
           for(var attr in json){   // attr  属性     json[attr]  值
               //开始遍历 json
               // 计算步长    用 target 位置 减去当前的位置  除以 10
              // console.log(attr);
               var current = parseInt(getStyle(obj,attr));  // 数值
              // console.log(current);
                // 目标位置就是  属性值
               var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
               step = step > 0 ? Math.ceil(step) : Math.floor(step);
               obj.style[attr] = current    step   "px" ;
               console.log(current);
               if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
               {
                   flag =  false;
               }
           }
           if(flag)  // 用于判断定时器的条件
           {
               clearInterval(obj.timer);
               //alert("ok了");
               if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
               {
                   fn(); // 函数名    ()  调用函数  执行函数
               }
           }
       },30)
   }
   function getStyle(obj,attr) {  //  谁的      那个属性
       if(obj.currentStyle)  // ie 等
       {
           return obj.currentStyle[attr];  // 返回传递过来的某个属性
       }
       else
       {
           return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
       }
   }
</script>
案例:仿照360开机效果

图片 7

仿360开机效果.gif

案例源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box" id="box">

    <div class="hd" id="t">
        [站外图片上传中……(1)]
    </div>
    <div class="bd" id="b">
        [站外图片上传中……(2)]
    </div>
</div>
</body>
</html>
<script>
    var b = document.getElementById('b');
    var closeAd = document.getElementsByTagName("span")[0];
    closeAd.onclick = function() {
        animate(b,{height: 0},function(){
            animate(b.parentNode,{width:0});
        });
    }


    // 多个属性运动框架
    function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
                // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
                // console.log(current);
                // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
                console.log(current);
                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
                {
                    fn(); // 函数名    ()  调用函数  执行函数
                }
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

in 运算符

in运算符也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名,才会返回true,否则返回false

// in 可以用用来判断 json 里面有没有某个属性

案例源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    var json = {name: "刘德华",age : 55};
    // in 可以用用来判断 json 里面有没有某个属性
    if("andy" in json)
    {
        console.log("yes");  // 返回的是 yes
    }
    else
    {
        console.log("no");
    }
</script>

封装运动框架基本函数 (添加透明度和zindex)★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架  添加回调函数
    function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                //开始遍历 json
                // 计算步长    用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = 0;
                if(attr == "opacity")
                {
                    current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                    console.log(current);
                }
                else
                {
                    current = parseInt(getStyle(obj,attr)); // 数值
                }
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //判断透明度
                if(attr == "opacity")  // 判断用户有没有输入 opacity
                {
                     if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                     {
                         // obj.style.opacity
                         obj.style.opacity = (current   step) /100;
                     }
                    else
                     {  // obj.style.filter = alpha(opacity = 30)
                         obj.style.filter = "alpha(opacity = " (current   step)* 10 ")";

                     }
                }
                else if(attr == "zIndex")
                {
                    obj.style.zIndex = json[attr];
                }
                else
                {
                    obj.style[attr] = current    step   "px" ;
                }

                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
                {
                    fn(); // 函数名    ()  调用函数  执行函数 暂且这样替代
                }
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

(依据距离封装完成)★★★★★★★★★★【重点】以上源码下面部分直接存为animate.js使用

function animate(obj,json,fn) {  // 给谁    json
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
        for(var attr in json){   // attr  属性     json[attr]  值
            //开始遍历 json
            // 计算步长    用 target 位置 减去当前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 数值
            }
            // console.log(current);
            // 目标位置就是  属性值
            var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if(attr == "opacity")  // 判断用户有没有输入 opacity
            {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current   step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = " (current   step)* 10 ")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current    step   "px" ;
            }

            if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
            {
                flag =  false;
            }
        }
        if(flag)  // 用于判断定时器的条件
        {
            clearInterval(obj.timer);
            //alert("ok了");
            if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
            {
                fn(); // 函数名    ()  调用函数  执行函数
            }
        }
    },30)
}
function getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}
今日仿照360图片素材获取:

链接:http://pan.baidu.com/s/1miEvqoo 密码:7fv8

本文由yzc216亚洲城发布于网站首页,转载请注明出处:前端基本功,原生JS实现动画函数的封装

关键词: yzc216亚洲城