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

最新推荐文章于 2023-01-16 20:51:25 发布

波克比520

最新推荐文章于 2023-01-16 20:51:25 发布

阅读量686

点赞数

分类专栏： javascript 文章标签： JS运动

本文链接：https://blog.csdn.net/u011175410/article/details/50386607

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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