js运动框架完美运动框架

最新推荐文章于 2021-03-06 16:40:43 发布

qiangD

最新推荐文章于 2021-03-06 16:40:43 发布

阅读量519

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<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);
}

qiangD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动框架完美运动框架

<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } textarea { position: fixed; right: 0; top: 50px;
复制链接

扫一扫