zoukankan html css js c++ java

03JavaScript程序设计修炼之道 2019-07-11_21-15-43 运动框架：顺序、同时改变属性

sport.js

// obj 运动的元素
// target 目标值
// attr 操作的属性
function move(obj, target, attr) {
    clearInterval(obj.timer);
    var speed = 0;
    if (attr === "opacity") {
        current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100
        speed = target - current > 0 ? 1 : -1;
    } else {
        current = parseInt(getStyle(obj, attr));
        speed = target - current > 0 ? 10 : -10;
    }
    obj.timer = setInterval(() => {
        if (attr === "opacity") {
            current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100
            obj.style[attr] = (current + speed) / 100;
        } else {
            current = parseInt(getStyle(obj, attr));
            obj.style[attr] = (current + speed) + "px";
        }
        if (Math.abs(target - current) < Math.abs(speed)) {
            if (attr === "opacity") {
                obj.style[attr] = target / 100;
            } else {
                obj.style[attr] = target + "px";
            }
            return clearInterval(obj.timer);
        }
    }, 30);
}

// 300px  200px  
//100+10+10+10


function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

sport2.js

// obj 运动的元素
// target 目标值
// attr 操作的属性
function move(obj, target, attr,callback) {
    clearInterval(obj.timer);
    var speed = 0;
    if (attr === "opacity") {
        current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100
        speed = target - current > 0 ? 1 : -1;
    } else {
        current = parseInt(getStyle(obj, attr));
        speed = target - current > 0 ? 10 : -10;
    }
    obj.timer = setInterval(() => {
        if (attr === "opacity") {
            current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100
            obj.style[attr] = (current + speed) / 100;
        } else {
            current = parseInt(getStyle(obj, attr));
            obj.style[attr] = (current + speed) + "px";
        }
        if (Math.abs(target - current) < Math.abs(speed)) {
            if (attr === "opacity") {
                obj.style[attr] = target / 100;
            } else {
                obj.style[attr] = target + "px";
            }
            clearInterval(obj.timer);
            if(callback) {
                callback();
            }
        }
    }, 30);
}

// 300px  200px  
//100+10+10+10


function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

05animate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script src="sport2.js"></script>
    <script>
        var box = document.querySelector("#box");
        //move(box,200,"height");
        move(box,300,"width",function() {
            //console.log("动画完毕");
            move(box,200,"height",function() {
                move(box,300,"left");
            });
        });
        // 同时改变属性？  json {}
    </script>
</body>
</html>

查看全文

相关阅读:
elasticsearch为什么比mysql快
 elasticsearch（lucene）索引数据过程
 UidGenerator springboot2集成篇
 StampedLock的理解和使用
 EsClientRHL-elasticsearch java客户端开源工具
 Spring只定义接口自动代理接口实现类
 浅谈浏览器存储（cookie、localStorage、sessionStorage）
图片无缝拼接
 js中变量的连续赋值
 web页面ios浏览器img图片的坑

原文地址：https://www.cnblogs.com/HiJackykun/p/11182416.html