码迷,mamicode.com
首页 > 其他好文 > 详细

运动回调-链式运动

时间:2019-01-02 17:28:37      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:charset   rtm   element   utf-8   move   star   top   com   current   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 400px;
                top: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {

                var oDiv1 = document.getElementById("div1");

                oDiv1.onclick = function() {
                    
                    startMove(this, {
                        width: 200
                    }, 10,function(){
                        startMove(this,{
                            height: 200
                        },10);
                    });

                }

                function startMove(obj, json, iSpeed,fn) {
                    clearInterval(obj.iTimer);
                    var iCur = 0;
                    obj.iTimer = setInterval(function() {
                        
                        var iBtn=true;

                        for(var attr in json) {
                            var iTarget = json[attr];
                            if(attr == "opacity") {
                                iCur = Math.round(css(obj, "opacity") * 100);
                            } else {
                                iCur = parseInt(css(obj, attr));
                            }

                            if(iCur != iTarget) {
                                iBtn=false;
                                if(attr == "opacity") {
                                    obj.style.opacity = (iCur + iSpeed) / 100;
                                    obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed) + ‘)‘;
                                } else {
                                    obj.style[attr] = iCur + iSpeed + ‘px‘;
                                }
                            } 

                        }
                        if(iBtn){
                            clearInterval(obj.iTimer);
                            fn && fn.call(obj);
                        }

                    }, 30);
                }

                function css(obj, attr) {
                    if(obj.currentStyle) {
                        return obj.currentStyle[attr];
                    } else {
                        return getComputedStyle(obj, false)[attr];
                    }
                }

            }
        </script>
    </head>

    <body>
        <div id="div1"></div>
    </body>

</html>

 

运动回调-链式运动

标签:charset   rtm   element   utf-8   move   star   top   com   current   

原文地址:https://www.cnblogs.com/gxywb/p/10209322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!