<!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>
分享到：
相关推荐
在JavaScript学习过程中，缓动效果是一种常见的动画技术，它能够为网页元素的显示与隐藏添加平滑过渡，提升用户体验。本篇文章将聚焦于如何利用JavaScript实现缓动效果来控制div的显示与隐藏。 首先，我们需要了解...
例如，`tween.js`是一个非常流行的JavaScript缓动库，它提供了丰富的缓动函数，如线性、平方、立方、四次方等，可以实现不同类型的缓动效果。 在实现物体碰撞缓动效果时，我们首先需要定义物体的坐标、大小、速度和...
在JavaScript的世界里，缓动函数（Easing Function...总结，纯JavaScript缓动函数是实现动态效果的重要工具，通过理解和运用不同的缓动函数，我们可以创造出丰富多样的动画效果，为用户带来更加生动、自然的交互体验。
网页图片手风琴缓动效果是一种常见的网页交互设计技术，主要应用于网站的图像展示，尤其在手机产品或图像丰富的项目中十分流行。这种效果能够使用户在浏览网页时获得更流畅、更有趣的体验，同时也有效地节省了页面...
总的来说，GreenSock JS是一个专业且功能强大的JavaScript动画库，通过缓动函数为网页开发带来了无限的创意可能。无论你是初学者还是经验丰富的开发者，都能从其易用性和灵活性中受益。通过学习和实践，你可以将网页...
在JavaScript世界中，jsC的Tween插件为开发者提供了简单易用的API来实现这种缓动效果。下面将详细探讨Tween的核心概念、工作原理以及如何使用jsC的Tween插件。 一、Tween的概念与应用 Tween，源自英文“in-between...
JavaScript中的缓动效果是动画制作中的一个重要概念，它使得元素的移动、旋转或其他视觉变化更加平滑自然，而非简单地匀速进行。缓动效果广泛应用于网页交互、游戏动画以及各种动态用户界面中。本文将介绍如何在...
在JavaScript编程中，实现缓动动画效果是一种常见的需求，它能为网页增添动态美感和交互体验。本实例通过具体的代码示例，展示了如何利用JavaScript来创建这种效果。以下是实现缓动动画的关键知识点： 1. **...
比flash内置缓动效果更加实战。代码实现可百度，非常简单。
这段代码将使ID为'box'的元素在两秒内平滑地移动到左边300像素，并同时渐隐至透明，使用了Power2类型的缓动函数，这种缓动效果在开始和结束时比较缓慢，中间加速。 除了基本的缓动，还可以链式调用多个动画，创建更...
这些库通常提供更高级的API，如缓动函数、时间轴管理和延迟执行等。 5. **Web Animations API**：这是W3C标准的一部分，允许开发者直接操作DOM元素的动画属性，提供了更多的控制和性能优化。 6. **使用Promise或...
缓动效果可以分为几种类型：线性（Linear）、缓入（Ease In）、缓出（Ease Out）、缓入缓出（Ease In Out）等。每种类型的缓动函数都通过不同的方式改变动画的速度，以提供更自然或特定的视觉体验。 线性缓动是最...
缓动库tweens是一种在编程中广泛使用的工具，特别是在游戏开发、动画设计和用户界面动态效果中。它的核心功能是为对象的运动提供平滑、自然的过渡效果，使得动画从一个状态平滑地过渡到另一个状态，而不是简单地瞬间...
"缓动DEMO（CanvasAnimate）"是一个很好的实例，它展示了如何使用JavaScript和Canvas API来实现平滑、动态的动画效果。这个项目的核心在于“缓动”，这是一种让元素从一个位置平滑过渡到另一个位置的技术，使得动画...
JavaScript中的缓动效果是一种在动画或过渡中模拟真实世界运动感的技术，它可以使得元素的移动、旋转或透明度改变更加平滑自然。缓动效果通常用于网页交互、游戏开发以及各种用户界面动态效果中，以提升用户体验。在...
"JS动画效果源代码（含注释）"这个资源包含了实现各种JavaScript动画效果的源码，这些代码经过了详细的注释，方便初学者理解和学习。 在JavaScript中，动画效果主要通过操作DOM（Document Object Model）元素的样式...
AS2.0版本是GreenSock针对Flash Player 8及更早版本的ActionScript 2.0编程语言所设计的版本，它提供了丰富的缓动效果和强大的时间线控制，使得在Flash中创建复杂的动画序列变得轻松简单。 GreenSock AS2.0的核心...
JavaScript原生定时器实现动画的缓动效果，供大家参考，具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = ...