js运动框架完美运动框架

来源：互联网发布：华为智能家庭软件编辑：程序博客网时间：2024/04/29 14:08
<head>    <meta charset="UTF-8">    <title>test</title>    <style>    * {        margin: 0;        padding: 0;    }    textarea {        position: fixed;        right: 0;        top: 50px;    }    div {        margin-top: 10px;        width: 100px;        height: 30px;        background: red;        border: 1px solid green;        cursor: pointer;        opacity: 0.3;        filter: alpha(opacity=30);    }    </style></head><body style="height:3000px;">    <textarea name="" id="" cols="30" rows="10"></textarea>    <div>div1</div>    <div>div2</div>    <div>div3</div>    <script src="test.js"></script>    <script>    window.onload = function() {        var oDiv1 = document.getElementsByTagName('div');        for (var i = 0; i < oDiv1.length; i++) {            // 给每个元素对象设置一个定时器            // 用来结局定时器公用的问题            oDiv1[i].timer = null;            oDiv1[i].onclick = function() {                startMove2(this, {                    "width": 300,                    "height": 100,                    "opacity": 100                }, function() {                    // alert();                });            };        }        alert(getStyle(oDiv1[0], 'opacity'));    }    </script></body>/** * [getStyle 获取计算出来的样式] * @param  {[type]} obj  [元素对象] * @param  {[type]} attr [属性名] * @return {[type]}      [对应属性名的值] */function getStyle(obj, attr) {    /*兼容IE678*/    if (obj.currentStyle) {        // IE        return obj.currentStyle[attr];    } else {        // 其他        return getComputedStyle(obj, false)[attr];    }}/** * [startMove 完美欲动框架] * @param  {[Ojbect]} obj    [description] * @param  {[Ojbect json]} jsonObj [json对象] * @return {[type]}        [没有返回值] */function startMove2(obj, jsonObj, fn) {    clearInterval(obj.timer);    var flag = true;    obj.timer = setInterval(function() {        for (var attr in jsonObj) {            // 获取当前值            if (attr == 'opacity') {                // 因为opacity是小数，所以用 parseFloat                // 用parseFloat之后会出现，52.00000000000001的情况，所以要加上Math.round                // 这里很奇怪 parseInt(parseFloat(getStyle(obj, attr) * 100));在谷歌里面不兼容                // 其他浏览器都得到了很好的兼容                var curr = Math.round(parseFloat(getStyle(obj, attr) * 100));            } else {                var curr = parseInt(getStyle(obj, attr));            };            // 求速度             var speed = (jsonObj[attr] - curr) / 6;            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);            // 检测停止             if (jsonObj[attr] != curr) {                flag = false;            }            if (attr == 'opacity') {                obj.style.opacity = (curr + speed) / 100;                obj.style.filter = 'filter(alpha=' + (curr + speed) + ')';            } else {                obj.style[attr] = curr + speed + 'px';            };            if (flag) {                clearInterval(obj.timer);                if (fn) {                    fn();                }            }            console.log(attr + ": " + curr);        }    }, 30);}
0 0