Native JS realizes compound motion of various motions

This article shares with you a compound motion implemented with native JS. The so-called compound motion means that different attributes will change in the same interval. The effect is as follows:

The implementation code is as follows. You are welcome to copy, paste and comment.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS realizes compound motion of various motions</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 () {
                //Set the switch to prevent other values from stopping changing after a certain value is reached 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);
                    //If a certain value has not been reached, bStop is 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';
                    }
                }
 
                //If it is true in the last round of loop, the timer will be cleared 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="Start exercise" />
    <div id="div1"></div>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Python Machine Learning NLP Natural Language Processing Word2vec Movie Review Modeling
Python Machine Learning NLP Natural Language Processing Basic Operations Accurate Word Segmentation
Python Machine Learning NLP Natural Language Processing Basic Operations News Classification
Python Machine Learning NLP Natural Language Processing Basic Operation Keywords
Python machine learning NLP natural language processing basic operations word vector model
Python Machine Learning NLP Natural Language Processing Basic Operations Domestic Violence Classification
A brief introduction to Python NLP
Python machine learning NLP natural language processing basic operations movie review analysis

<<: How to use Docker Swarm to build WordPress

>>: Detailed steps to install MySQL 5.7 via YUM on CentOS7