缓动动画

最新推荐文章于 2024-05-30 10:15:02 发布

junlingshiwo

最新推荐文章于 2024-05-30 10:15:02 发布

阅读量188

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_45722135/article/details/108389962

版权

JS 专栏收录该内容

17 篇文章

订阅专栏

《 1 封装缓动动画函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        #box{
            width: 100px;
            height: 100px;
            background-color: #0c80dc;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn">往右走</button>
<button id="btn1">往左走</button>
<div id="box"></div>

<script src="js/MyFunc.js"></script>
<script>
    window.onload=function (){
        var box=$('box');

        //向右走
        $('btn').onclick=function (ev) {
            buffer(box,800);
        }

        //向右走
        $('btn1').onclick=function (ev) {
            buffer(box,500);
        }

    }
    /**
     * 缓动动画函数
     * @param （Object）eleObj
     * @param （Number）target
     */
    function buffer(eleObj, target) {
        //1先清后设
        clearInterval(eleObj.timer);

        //1.1定义变量
        var speed=0;

       //1.2设置定时器
        eleObj.timer=setInterval(function (){
            //2.3求出步长
            speed=(target-box.offsetLeft)*0.2;
            //步数取整
            speed=(target>eleObj.offsetLeft) ? Math.ceil(speed) : Math.floor(speed);
            //2.4动起来
            eleObj.style.left= eleObj.offsetLeft+speed+'px';
            eleObj.innerText= eleObj.offsetLeft;

            //2.5清除定时器
            if ( eleObj.offsetLeft===target){
                clearInterval( eleObj.timer);
            }

        },20);

        }
</script>


</body>
</html>

《2 动态设置元素属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        #box{
            width: 150px;height: 150px;background-color: red;
        }
    </style>
</head>
<body>
<button id="btn">改变颜色</button>
<button id="btn1">改变长度</button>
<div id="box"></div>
<script src="js/MyFunc.js"></script>
<script>
    //改颜色
    $('btn').onclick=function () {
        //$('box').style.background='green';
        changeCssStyle($('box'),'background','green');
    }
    //改长度
    $('btn1').onclick=function () {
        //$('box').style.width='1000px';
        changeCssStyle($('box'),'width','1000px');

    }

    /**
     * 改变标签的css属性值
     * @param (Object)eleObj
     * @param (String)attr
     * @param (String / Number)value
     */
    function changeCssStyle(eleObj,attr,value) {
        //eleObj.style.attr=value;
        //下标方式改变css属性
        eleObj.style[attr]=value;

    }
</script>

</body>
</html>

《3 JS 获取css的样式：

在开发中，我们想要获取css的样式。通常采用：box.style.top box.style.backgroundColor等，但这种方式只能得到行内样式，而平常用的最多的是页内样式或者外部样式，解决这种问题

解决：兼容写法：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 5px solid #000;
        }
    </style>
</head>
<body>
<div id="box" ></div>
<button id="btn">获取属性值</button>
<script>
   var box=document.getElementById('box');
   var btn=document.getElementById('btn');
    btn.onclick=function () {
        // console.log(box.style.width);
        // console.log(box.style.height);
        // console.log(box.style.backgroundColor);
        // console.log(box.style.border);
        console.log(getStyleAttr(box, 'width'));
        console.log(getStyleAttr(box, 'height'));
        console.log(getStyleAttr(box, 'bored'));

    };
    function getStyleAttr(obj,attr) {
        if (obj.currentStyle){//IE和opera
            return obj.currentStyle[attr];
        }else {
            return window.getComputedStyle(obj,null)[attr];
        }

    }
</script>

</body>
</html>

《4 封装缓动动画函数---透明度

css设置透明度如上，用js来做的的透明度就更加方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #0f0f0f;
        }

        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            /*设置透明度*/
            /*opacity: 0.2;*/
            /*filter: alpha(opacity=50);*/



        }
    </style>
</head>
<body>
<button id="btn">往右走</button>
<button id="btn1">往左走</button>
<div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
    window.onload=function (ev) {
        var box=$('box');

        $("btn").onclick = function () {
            buffer(box, {"left": 800,"top":100,"width":600,"height":700,"opacity":0.5},function () {
                buffer(box, {"left": 100,"top":300,"width":400,"height":500,"opacity":0.3},function () {
                    buffer(box, {"left": 300,"top":200,"width":200,"height":200},null)
                });
            });
        };


    };


</script>

</body>
</html>