JS模拟土豆弹窗—

JS模拟土豆弹窗——链式运动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS模拟土豆弹窗——链式运动</title>
        <style>
            *{padding: 0; margin: 0;}
            body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;}
            #foot{ width: 187px; padding-left: 10px; height: 34px; line-height: 34px; background: #f80; color: #fff; position: absolute; bottom: 0; right: /*0*/-154px; cursor: pointer;}
            #content{width: 197px; height: 280px; background: #ddd; position: absolute; right: 0; bottom: /*34*/-280px;}
            #close{float: right; padding: 0px 8px; font-size: 20px; background: #ccc; display: inline-block; cursor: pointer;}
        </style>
    </head>
    <body>
        <div id="box">
            <div id="content">
                <span id="close">×</span>
            </div>
            <div id="foot">展开</div>
        </div>

        <script>
        // 封装getStyle函数
        function getStyle(obj,attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
        }

        // 封装完美运动框架startMove函数
        function startMove(obj,json,fnEnd){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var bStop = 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]){bStop = 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(bStop){
                    clearInterval(obj.timer);
                    fnEnd && fnEnd();
                }
            },30);
        }    
        </script>
        <script type="text/javascript">
            window.onload = function(){
                var oCon = document.getElementById('content');
                var oClose = document.getElementById('close');
                var oFoot = document.getElementById('foot');

                oFoot.onclick = function(){
                    oFoot.innerHTML = '收起';
                    startMove(oFoot,{right:0},function(){
                        startMove(oCon,{bottom:34});
                    });
                };

                oClose.onclick = function(){
                    startMove(oCon,{bottom:-280},function(){
                        startMove(oFoot,{right:-154});
                        oFoot.innerHTML = '展开';
                    });
                };
            };
        </script>
    </body>
</html>