js缓冲运动_机械运动缓冲定位-优快云博客

本文链接：https://blog.youkuaiyun.com/oiu1010110/article/details/52652920

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>缓冲运动</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			opacity: 0.3;
			filter: alpha(opacity:30);
			margin:100px auto;
		}
		input {
			width: 80px;
			height: 30px;
			margin-left: 48%; 
		}
	</style>
</head>
<body>
	<input id="btn1" type="button" name="运动" value="运动" />
	<div id="div1"></div>	
	<script type="text/javascript">
	window.onload = function(){
		var obtn = document.getElementById('btn1');
		var oDiv = document.getElementById('div1');
		obtn.onclick = function(){
			startMove(oDiv,{width:200,height:300,opacity:100},function(){
				startMove(oDiv,{width:100,height:100});
			});
		}
	}
	function getStyle(obj,name){
		if (obj.currentStyle) {
			return obj.currentStyle[name];
		}else{
			return getComputedStyle(obj,false)[name];
		}
	}
	function getClass(Oparent,sClass){
		var objs = Oparent.getElementsByTagName('*');
		var aresult = [];
		for(var i = 0;i<objs.length;i++){
			if (objs[i].className == sClass) {
				aresult.push(objs[i]);
			}
		}
		return aresult;
	}

	function startMove(obj,json,fnEnd) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var stop = true; //假设json所有值都到达
			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]) {
					stop = 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 (stop) {
				clearInterval(obj.timer);
				if (fnEnd) {
					fnEnd();
				}
			}
		},30);
	}
	
	</script>
</body>
</html>