原生JS实现各种运动之复合运动

更新时间：2021年08月23日 16:28:08 作者：aiguangyuan

这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下：

实现代码如下，欢迎大家复制粘贴及吐槽。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现各种运动之复合运动</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            opacity: 0.3;
        }
    </style>
    <script>
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
 
        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //设定开关，防止某一个值达到后其它值停止变化
                var bStop = true;
                for (var attr in json) {
                    var iCur = 0;
                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        iCur = parseInt(getStyle(obj, attr));
                    };
                    var iSpeed = (json[attr] - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    //如果某一个值还没有达到，bStop就为false
                    if (iCur != json[attr]) {
                        bStop = false;
                    };
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }
 
                //最后一轮循环时如果为true，才清除定时器
                if (bStop) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 30)
        }
    </script>
    <script>
        window.onload = function () {
 
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
 
            oBtn.onclick = function () {
 
                startMove(oDiv, {
                    width: 400,
                    height: 200,
                    opacity: 100
                });
            };
        };
    </script>
</head>
 
<body style="background:#0F0;">
    <input id="btn1" type="button" value="开始运动" />
    <div id="div1"></div>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js实现touch移动触屏滑动事件
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到
2015-04-04
JavaScript实现简单进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
js获得参数的getParameter使用示例
这篇文章主要介绍了js获得参数的getParameter使用示例,需要的朋友可以参考下
2014-02-02
如何在TypeScript 中实现接口的类
这篇文章主要介绍了TypeScript 中实现接口的类,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
如何使用three.js 制作一个三维的推箱子游戏
这篇文章主要介绍了如何使用three.js 制作一个三维的推箱子游戏，文中代码非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
详解微信小程序工程化探索之webpack实战
这篇文章主要介绍了详解微信小程序工程化探索之webpack实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
JS闭包与延迟求值用法示例
这篇文章主要介绍了JS闭包与延迟求值,结合简单实例分析了JS针对运算量较大的情况下闭包与延迟求值的实现技巧,需要的朋友可以参考下
2016-12-12
js实现股票实时刷新数据案例
下面小编就为大家带来一篇js实现股票实时刷新数据案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
ES6新特性之解构、参数、模块和记号用法示例
这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
2017-04-04
js自动查找select下拉的菜单并选择(示例代码)
这篇文章主要介绍了js自动查找select下拉的菜单并选择(示例代码)需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02