JS 简单的缓动效果

最新推荐文章于 2022-07-08 20:45:10 发布

原创最新推荐文章于 2022-07-08 20:45:10 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 同时被 2 个专栏收录

20 篇文章

订阅专栏

html

18 篇文章

订阅专栏

本文探讨了如何通过HTML、CSS、JavaScript等技术创建一个音乐问答游戏，包括UI设计、动画效果以及结果展示的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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