JS 简略的缓动效果
日期：2014-05-16 浏览次数：20544 次
JS 简单的缓动效果
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
