JavaScript-简单的动画函数封装

最新推荐文章于 2022-04-10 13:15:19 发布

飒小北

最新推荐文章于 2022-04-10 13:15:19 发布

阅读量170

点赞数

分类专栏： JavaScript 文章标签： JavaScript 动画

本文链接：https://blog.csdn.net/tian_tian_gong/article/details/87795132

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

可以控制元素left top width 发生变化时候的动画

// 根据样式名， 获得样式值  兼容所有浏览器
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];
    } else {
        return obj.currentStyle[name];
    }
}

// 简单动画函数
/*
    1. obj 要执行动画的对象
    2. attr要修改动画的样式 left top width...
    3. target 执行动画的目标
    4.speed 移动的速度
    5. callback动画执行完毕以后执行回调函数
*/
function move(obj, attr, target, speed, callback) {
    clearInterval(obj.timer);
    var current = parseInt(getStyle(obj, attr));
    if (current > target) {
        speed = -speed;
    }
    obj.timer = setInterval(function () {
        var oldValue = parseInt(getStyle(obj, attr));
        var newValue = oldValue + speed;
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        obj.style[attr] = newValue + "px";
        if (newValue == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
    }, 30)
}

使用

	<!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">
    <script src="js/tools.js"></script>
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #test {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 40px;
            left: 0px;
        }

        #test2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 200px;
            left: 0px;
        }
    </style>

</head>

<body>
    <button id="btn01">向右移动</button>
    <button id="btn02">向左移动</button>
    <button id="btn03">让test2往右边移动</button>
    <button id="btn04">改变test2</button>
    <div id="test">
        test1
    </div>

    <div id="test2">
        test2
    </div>

    <div style="width:0px; height:400px; border-left:1px solid black;position:absolute; left:800px;top:0px;">

    </div>

    <script>
        window.onload = function () {

            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var btn03 = document.getElementById("btn03");
            var btn04 = document.getElementById("btn04");
            var test = document.getElementById("test");
            var test2 = document.getElementById("test2");

            btn01.onclick = function () {
                move(test,"left",800, 20);
            }
            btn02.onclick = function () {
                move(test,"left", 0, 10);
            }
            btn03.onclick = function () {
                move(test2,"left", 800, 10);
            }
            btn04.onclick = function () {
                move(test2,"width", 300, 10,function(){
                    move(test2,"height", 300, 10,function(){
                        alert("结束");
                    });
                });
            }



        }
    </script>
</body>

</html>

飒小北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-简单的动画函数封装

可以控制元素left top width 发生变化时候的动画// 根据样式名，获得样式值兼容所有浏览器function getStyle(obj, name) { if (window.getComputedStyle) { return getComputedStyle(obj, null)[name]; } else { ret...
复制链接

扫一扫