js简单的缓动效果

最新推荐文章于 2024-03-03 16:44:08 发布

ch_kexin

最新推荐文章于 2024-03-03 16:44:08 发布

阅读量1.4k

点赞数

分类专栏： jquery javascript html 文章标签： function callback animation class jquery timer

本文链接：https://blog.csdn.net/ch_kexin/article/details/7221953

版权

javascript 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

用了两种方法：第一种是用的jquery，下载一个 jquery-1.7.1.js就好，另一种方法是通过myAnimation.js

嵌入的js路径可能不一样，需要自己调一下。

// myAnimation.js

 Tween = {
	Linear : function(initPos, targetPos, currentCount, count) {
		var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
		return c * t / d + b;
	},
	Cubic : {
		easeIn : function(initPos, targetPos, currentCount, count) {
			var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
			return c * (t /= d) * t * t + b;
		},
		easeOut : function(initPos, targetPos, currentCount, count) {
			var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
			return c * (( t = t / d - 1) * t * t + 1) + b;
		},
		easeInOut : function(initPos, targetPos, currentCount, count) {
			var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
			if((t /= d / 2) < 1)
				return c / 2 * t * t * t + b;
			return c / 2 * ((t -= 2) * t * t + 2) + b;
		}
	}

}
Animation = {
	timer : 10,
	moveDirection : function(obj, styleName, targetPos, count, Func, callback) {
		obj = this.getItself(obj);
		count = !!count ? count : 100;
		var styleValue = parseInt(obj.offsetTop) || 0;
		var currentAnimateFun = Func || Tween.Linear;
		var currentCount = 0;
		var curInterval = window.setInterval(function() {
			if(currentCount > count) {
				window.clearInterval(curInterval);
				callback();
			} else {
				currentCount = currentCount + 1;
				var tempValue = currentAnimateFun(styleValue, targetPos, currentCount, count);
				obj.style[styleName] = tempValue + "px";
			}
		}, this.timer)
	},
	movePos : function(obj, targetPos, count, Func) {
		obj = this.getItself(obj);
		var currentCount = 0;
		count = Math.abs(count) || 10;
		var elPos = this.getElementPos(obj);
		var initPos = {
			x : elPos.x,
			y : elPos.y
		}
		Func = Func || Tween.Linear;
		var flag = setInterval(function() {
			if(currentCount > count) {
				clearInterval(flag);
			} else {
				currentCount++;
				var tmpX = Func(initPos.x, targetPos.x, currentCount, count);
				var tmpY = Func(initPos.y, targetPos.y, currentCount, count);
				obj.style.left = tmpX + "px";
				obj.style.top = tmpY + "px";
				//清除小数点的误差
				if(Math.abs(tmpX - targetPos.x) < 1) {
					obj.style.left = targetPos.x + "px";
				}
				if(Math.abs(tmpY - targetPos.y) < 1) {
					obj.style.top = targetPos.y + "px";
				}
			}
		}, this.timer);
	},
	getElementPos : function(el) {
		el = this.getItself(el);
		var _x = 0, _y = 0;
		do {
			_x += el.offsetLeft;
			_y += el.offsetTop;
		} while (el = el.offsetParent);
		return {
			x : _x,
			y : _y
		};
	},
	getItself : function(id) {
		return "string" == typeof id ? document.getElementById(id) : id;
	}
}

//main.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Music Trival</title>
		<script src="../jquery/jquery-1.7.1.js"></script>
        <script src="../jquery/myAnimation.js"></script>
		<script type="text/javascript">
			var resultbg = null;
			var resultImg = null;
			var okbtn = null;
			var isHideResult = false;

			function loadUI() {
				resultbg = document.getElementById("resultbg");
				resultImg = document.getElementById("resultImg");
				
				okbtn = document.getElementById("ok");
				okbtn.addEventListener("mousedown", onMouseDown);
				resultbg.addEventListener("mousedown", onMouseDown1);
			}

			function onMouseDown() {
				//Animation.moveDirection(resultbg,'top',200,20,Tween.Linear,callback);
				setResultBtnEffect("run");
			}
			function onMouseDown1() {
				//Animation.moveDirection("resultbg",'top',-200,50,Tween.Linear);
				setResultBtnEffect("close");
			}
			function callback(){
				}

			function setResultBtnEffect(str) {
				var setIntervalID = 0;
				var setTimeoutID = 0;
				var count = 0;
				if(str == "run") {
					isHideResult = true;
					count = -200;
					setIntervalID = window.setInterval(runShow, 50);
				} else if(str == "close") {
					isHideResult = false;
					count = 200;
					setIntervalID = window.setInterval(runHide, 50);
				}
				function runShow() {
					count += 50;
					resultbg.style.top = count + "px";
					if(count >= (200)) {
						resultbg.style.top = "200px";
						clearInterval(setIntervalID);
						setTimeoutID = setTimeout(runBack, 2000);
					}
				}

				function runBack() {
					clearTimeout(setTimeoutID);
					if(isHideResult) {
						setIntervalID = setInterval(runHide, 50);
						onNextQuestion("noclick");
						isHideResult = false;
					}
				}

				function runHide() {
					count -= 50;
					resultbg.style.top = count + "px";
					if(count <= (-200)) {
						resultbg.style.top = "-200px";
						clearInterval(setIntervalID);
					}
				}

			}
		</script>
		<style type="text/css" >
			.bg {
				background-color: #606;
				width: 320px;
				height: 480px;
			}
			.txt {
				position: relative;
				display: block;
				top: 130px;
				left: 70px;
				width: 180px;
			}
			.btn {
				position: relative;
				display: block;
				top: 350px;
				left: 95px;
				width: 120px;
			}
			.resultbg {
				position:absolute;
				display: block;
				z-index: 10;
				top: -200px;
				left: 80px;
			}
		</style>
	</head>
	<body onLoad="loadUI();">
		<div class="bg">
			<input  type="text" class="txt" id="name">
			<button   class="btn" id="ok">OK</button>
			    <article class="resultbg" id="resultbg">
				<button id="resultImg" style="width:150px; height:80px" >
					Right
				</button>
			</article>
		</div>
	</body>
</html>

ch_kexin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单的缓动效果

用了两种方法：第一种是用的jquery，下载一个 jquery-1.7.1.js就好，另一种方法是通过myAnimation.js 嵌入的js路径可能不一样，需要自己调一下。// myAnimation.js Tween = { Linear : function(initPos, targetPos, currentCount, count) { var b = init
复制链接

扫一扫