[学习笔记]JavaScript基础--完美运动框架

来源：互联网发布：网络舆情面试编辑：程序博客网时间：2024/05/01 07:45
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title><meta charset="utf-8" />    <style>        #div1 {width:100px; height:100px;background:red;               filter:alpha(opacity:30); opacity:0.3;        }    </style>    <script>        window.onload = function ()        {            var oBtn = document.getElementById('btn1');            var oDiv = document.getElementById('div1');            oBtn.onclick = function ()            {                startMove(oDiv, { width: 111, height: 300, opacity: 100 }               );            };        };        function getStyle(obj, name) {            if (obj.currentStyle) {                return obj.currentStyle[name];            }            else {                return getComputedStyle(obj, false)[name];            }        }        function startMove(obj, json, fnEnd) {            clearInterval(obj.timer);            obj.timer = setInterval(function () {                var Stop = true;  //假设：所有的值都到了目标点                for (var attr in json) {                    var cur = 0;                    if (attr == 'opacity') {                        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);                    }                    else {                        cur = parseInt(getStyle(obj, attr));                    }                    var speed = (json[attr] - cur) / 6;                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);                    if(cur!=json[attr])                        Stop=false;                                        if (attr == 'opacity') {                        obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';                        obj.style.opacity = (cur + speed) / 100;                                                }                    else                    {                        obj.style[attr] = cur + speed + 'px';                    }                                        }                if (Stop)                {                    clearInterval(obj.timer);                    if (fnEnd) fnEnd();                }            }, 30);        }    </script></head><body>    <input id="btn1" type="button" value="运动" />    <div id="div1">    </div></body></html>
0 0