JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

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

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了原生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实现各种运动之复合运动全部内容，希望文章能够帮你解决原生JS实现各种运动之复合运动所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jsjs
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程