JS封装一个缓动运动框架

最新推荐文章于 2021-10-15 17:03:48 发布

原创最新推荐文章于 2021-10-15 17:03:48 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #框架

JavaScript-demo 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单运动框架，该框架能够控制HTML元素的位置、透明度及层级，并通过遍历JSON对象来逐步调整元素的CSS属性，实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 得到css样式
function getStyle(obj,attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr]; // ie浏览器
    } else {
        return window.getComputedStyle(obj,null)[attr]; // 其他浏览器
    }

}


// 封装运动函数
var timer = null;

function moveFrame(obj,json,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 用来判断是否停止定时器
        var flag = true
        // 遍历json;
        for (var attr in json) {
            // 得到当前的属性值
            var current = 0;
            if (attr == 'opacity'){
                // *100方便计算
                current = parseInt(getStyle(obj,attr)*100);
            } else {
                current = parseInt(getStyle(obj,attr));
            }

            // json[attr] 目标值
            if (attr == 'opacity'){
                var step = (json[attr]*100 - current) / 10;
                step = step > 0? Math.ceil(step): Math.floor(step);
            }else {
                var step = (json[attr] - current) / 10;
                step = step > 0? Math.ceil(step): Math.floor(step);
            }


            if(attr == 'opacity') {
                // 判断浏览器是否支持opacity
                if ("opacity" in obj.style) {
                    obj.style.opacity = parseFloat((current + step) / 100);
                }else {
                    // filter : alpha(opacity = 50);
                    obj.style.filter = "alpha(opacity = "+ (current + step) +")";
                }
            }
            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);
            // 回调函数
            if (callback){
                callback();
            }
        };
    },30);
}

引入js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            opacity: 1;
            left: 0;
            top: 100px;

        }
    </style>
</head>
<body>
<button>点击</button>
<div id="demo"></div>
<script src="js/moveFrame.js"></script>
<script>
    var demo = document.getElementById("demo");
    var btn= document.getElementsByTagName('button')[0];
    console.log(btn,demo)
    btn.onclick = function () {
        moveFrame(demo,{height:"300",left:"200",opacity:"0.3",zIndex:10});
    }
</script>
</body>
</html>