您的位置：首页 > Web前端 > JavaScript

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

2015-12-23 14:16 573 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航