<!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>
分享到：
相关推荐
比flash内置缓动效果更加实战。代码实现可百度，非常简单。
JavaScript原生定时器实现动画的缓动效果，供大家参考，具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = ...
话不多说，先上效果，一个体验非常好的拖拽缓动的效果，让页面提升一个档次。 这个效果看似很简单，到也困惑了很长时间，为什么别人写出来的拖拽体验为什么这么好？ 直到我自己实现了以后，才发现，原来我想的实现...
今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧，且有多种动画方式供选择，使用简单且免费。
通过JS实现网页轮播图滚动效果,包含JS缓动动画效果以及一个简单的网页界面，压缩包里包含页面的源代码、缓动动画源代码、轮播图设计思路等。
其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。 还有提供了以下方法： Next: 切换下一个 Previous: 切换上一个 Stop: 停止自动切换 还有上面说到的Run
缓动选择 一个简单的 jQuery 扩展，它创建一个选择框，其中包含 jQuery.easing 对象中所有可用的缓动算法。 用于测试动画。 与 jQuery 缓动插件配合使用效果很好： :
一些常用的javascript效果和工具类其中包含了瀑布流，skitter幻灯片，多动排序，还有一些...—— pubuliu 简单的瀑布流布局及其实现方式|—— threejsball 基于webgl的3d效果|—— 前端规范 一些js的开发规范|—— 缓
MojoJS-Animation v2.0.3 MojoJS-Animation是一个非常轻巧且功能... 支持完全兼容的标准缓动效果等。 linearquadraticIn , quadraticOut , quadraticInOutcubicIn , cubicOut , cubicInOutquarticIn , quarticOut ,
2015年流利会议演讲动画算法-激活用户界面的简单公式简介：动画... 通过对插值，缓动和排序的快速介绍，您将学习如何仅需少量代码就可以创建很多效果。 我们还将讨论使用CSS和JS以及当前浏览器功能时的性能注意事项。
itween其实挺好用的， ...发现网上没有，所以我就整理...还有一个简单的立方体缓动效果和一个球的路径缓动效果, 方便快速上手 另外说一下path那个用的是c#比较好（js的没有试出来，当然作者在iTweenPath也比较支持c#的）
Tween.js简介各类缓动算法，效果演示参见：如何使用参见：其中animation.js是新增，为了更简单的使用这些缓动算法，语法如下：Math.animation(form, to, duration, easing, callback);其中：form和to是必须参数，...
•鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 •当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。 实现代码： ...
Talk for Fluent Conference 2015 动画算法 - 激活用户界面的简单公式 ... 通过对插值、缓动和排序的快速介绍，您将学习如何使用少量代码创建大量效果。 我们还将讨论使用 CSS 和 JS 以及当前浏览器功能时的性能考虑。
4.2.2 带缓动效果的补间动画 68 4.3 为带关节的模型制作关键帧动画 71 4.3.1 载入模型 71 4.3.2 为模型制作动画 73 4.4 材质和光源动画 76 4.5 纹理动画 78 4.6 蒙皮动画和变形动画 80 4.7 本章小结...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 ... 10.4.7 创建缓动样式 10.4.8 做个好公民 10.5 小结 附录A 在线资源 附录B 开发工具 附录C JavaScript闭包
尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦...
简单配置出多个弹出动作特效，设置位置和样式，弹出效果，动画效果采用 jQuery.easing 插件 可以自定义各种效果。 方法介绍： def：默认方式设置 swing：默认方式加载 Quad：二次方缓动(t) Cubic：...
尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦...