<!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>