js学习笔记（js改变css多属性值，多组动画，透明度动画）

最新推荐文章于 2021-12-14 17:24:40 发布

甜甜今天学了吗

最新推荐文章于 2021-12-14 17:24:40 发布

阅读量398

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/106288160

版权

JSON的差异化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
</head>
<body>
<script>
    var obj = {
        "left" : 300,
        "top" : 400,
        "width" : 600,
        "height" : 600
    };
    for (var key in obj){
        console.log(key);//left,top,width,height
        console.log(obj[key]);//300,400,600,600
    }
</script>
</body>
</html>

特效1： js改变css多属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS改变css多属性值</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn1">测试1</button>
<button id="btn2">测试2</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var box = Tool.$('box');
        Tool.$('btn1').addEventListener('click',function () {
            donghua(box,{'width': 400});
        });
        Tool.$('btn2').addEventListener('click',function () {
            donghua(box,{'height' : 400,'left' : 800,'top' : 100});
        })
    });
    /**
     * 缓动动画
     * @param ele    要做动画的元素
     * @param json   元素的css属性和值（数组）
     */
    function donghua(ele,json) {
        var flag = false;//标志，标签的所有属性是否全部执行完
        clearInterval(ele.ding);  //将定时器绑定到要做动画的元素上
        var step = 0,begin = 0, target = 0;
        ele.ding = setInterval(function () {
            flag = true;
            for (var key in json){
                begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
                begin = parseInt(begin);//将字符串转成数字
                target = parseInt(json[key]);
                step = (target - begin) * 0.2;
                step = (target > begin) ? Math.ceil(step) : Math.floor(step);
                //当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
                ele.style[key]= begin + step + 'px';
                if (target !== begin){
                    flag = false;//说明全部属性还未执行完
                }
            } 
            //清除定时器
            if (flag){
                clearInterval(ele.ding);
            }
        },20)
    }
</script>
</body>
</html>

特效2：多组动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多组动画</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>
<body>
<button id="btn">多组动画</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var box = Tool.$('box');
        Tool.$('btn').addEventListener('click',function () {
            donghua(box,{'height' : 400,'left' : 800,'top' : 100},function () {
                donghua(box,{'height' : 100,'left' : 100,'top' : 500},function () {
                    donghua(box,{'height' : 200,'left' : 200,'top' : 100},null);
                });
            });
        });
    });
    /**
     * 缓动动画
     * @param ele    要做动画的元素
     * @param json   元素的css属性和值（数组）
     * @param fn     用来接收另一组动画的函数
     */
    function donghua(ele,json,fn) {
        var flag = false;//标志，标签的所有属性是否全部执行完
        clearInterval(ele.ding);  //将定时器绑定到要做动画的元素上
        var step = 0,begin = 0, target = 0;
        ele.ding = setInterval(function () {
            flag = true;
            for (var key in json){
                begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
                begin = parseInt(begin);//将字符串转成数字
                target = parseInt(json[key]);
                step = (target - begin) * 0.2;
                step = (target > begin) ? Math.ceil(step) : Math.floor(step);
                //当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
                ele.style[key]= begin + step + 'px';
                if (target !== begin){
                    flag = false;//说明全部属性还未执行完
                }
            }
            //清除定时器
            if (flag){
                clearInterval(ele.ding);//代表一组动画做完了
                //开启另一组动画
                if (fn){
                    fn();
                }
            }
        },20)
    }
</script>
</body>
</html>

特效3：透明度动画

在多组动画的基础上加一个opacity。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn">多组动画</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var box = Tool.$('box');
        Tool.$('btn').addEventListener('click',function () {
            donghua(box,{'height' : 400,'left' : 800,'top' : 100,'opacity' : 0.5},function () {
                donghua(box,{'height' : 100,'left' : 100,'top' : 500,'opacity' : 0.8},function () {
                    donghua(box,{'height' : 200,'left' : 200,'top' : 100,'opacity' : 1},null);
                });
            });
        });
    });
    /**
     * 缓动动画
     * @param ele    要做动画的元素
     * @param json   元素的css属性和值（数组）
     * @param fn     用来接收另一组动画的函数
     */
    function donghua(ele,json,fn) {
        var flag = false;//标志，标签的所有属性是否全部执行完
        clearInterval(ele.ding);  //将定时器绑定到要做动画的元素上
        var step = 0,begin = 0, target = 0;
        ele.ding = setInterval(function () {
            flag = true;
            for (var key in json){
                //获取要做动画的初始值
                //因为opacity是小数，不好运算，所以先给它乘100，之后再除
                if (key === 'opacity'){
                    begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
                    begin = parseInt(begin  * 100);//将字符串转成数字
                    target = parseInt(json[key] * 100);
                }else{
                    begin = Tool.getstyle(ele,key) || 0;
                    begin = parseInt(begin );
                    target = parseInt(json[key]);
                }

                step = (target - begin) * 0.2;
                step = (target > begin) ? Math.ceil(step) : Math.floor(step);
                //当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
                if (key === 'opacity') {
                    ele.style.opacity = (begin + step) / 100;
                }else{
                    ele.style[key]= begin + step + 'px';
                }

                if (target !== begin){
                    flag = false;//说明全部属性还未执行完
                }
            }
            //清除定时器
            if (flag){
                clearInterval(ele.ding);//代表一组动画做完了
                //开启另一组动画
                if (fn){
                    fn();
                }
            }
        },20)
    }
</script>
</body>
</html>