第一个版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<script type="text/javascript">
window.onload=function(){
var Teen = {
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 =t/(d/2)) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
}
}
var animateFun = function(ele,styleName,to,count,timespan){
var timespan = !!timespan?timespan:10;
var count =!!count?count:100;
var curAnimateFun = Teen.Cubic.easeIn;
var curCount = 0;
var styleValue= ele.style[styleName]||0;
styleValue =parseInt(styleValue);
var curInterval = window.setInterval(function(){
if(curCount>count){
window.clearInterval(curInterval);
}else{
curCount=curCount+1;
var tempValue = curAnimateFun(styleValue,to,curCount,count);
//alert(tempValue);
ele.style[styleName] = tempValue+"px";
}
},timespan);
}
document.getElementById("btn").onclick=function(){
//animateFun(document.getElementById("res"),'top',300);
}
document.getElementById("btn1").onclick=function(){
//animateFun(document.getElementById("res"),'top',0);
}
}
</script>
</head>
<body>
<div id="res" style="width:100px; height:100px; background-color:#339966; position:absolute; top:0; left:0"></div>
<input type="button" style="margin-top:200px;" value="动起来" id="btn"/>
<input type="button" style="margin-top:200px; margin-left:50px;" id="btn1" value="回去"/>
</body>
</html>
第二个版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<script type="text/javascript">
window.onload=function(){
var Teen = {
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 =t/(d/2)) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
}
}
var animateFun = function(ele,styleName,to,call,count,timespan){
var timespan = !!timespan?timespan:5;
var count =!!count?count:50;
var curAnimateFun = Teen.Cubic.easeIn;
var curCount = 0;
var styleValue= ele.style[styleName]||0;
var callfun = call;
styleValue =parseInt(styleValue);
var curInterval = window.setInterval(function(){
if(curCount>count){
window.clearInterval(curInterval);
if(!!callfun){
call();
}
}else{
curCount=curCount+1;
var tempValue = curAnimateFun(styleValue,to,curCount,count);
ele.style[styleName] = tempValue+"px";
}
},timespan);
}
var call1 = function(){
alert(123);
}
document.getElementById("btn").onclick= function(){
animateFun(document.getElementById("res"),'left',300,call1);
}
document.getElementById("btn1").onclick= function(){
animateFun(document.getElementById("res"),'left',0,call1);
}
}
</script>
</head>
<body>
<div id="res" style="width:100px; height:100px; background-color:#339966; position:absolute; top:0; left:0"></div>
<input type="button" style="margin-top:200px;" value="动起来" id="btn"/>
<input type="button" style="margin-top:200px; margin-left:50px;" id="btn1" value="回去"/>
</body>
</html>
第三个版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<script type="text/javascript">
window.onload=function(){
var Teen = {
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 =t/(d/2)) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
}
}
var animateFun = function(){
var len = arguments.length;
var ele,styleName,to,count,timespan,call;
if(len>3){
//如果大于3个参数，那么
ele = arguments[0];
styleName=arguments[1];
to = arguments[2];
for(var i =3;i<len;i++){
if(typeof(arguments[i])=="function"){
call = arguments[i];
}else{
if(!!!count){
count = arguments[i];
}else{
timespan = arguments[i];
}
}
}
}
var timespan = !!timespan?timespan:5;
var count =!!count?count:50;
var curAnimateFun = Teen.Cubic.easeIn;
var curCount = 0;
var styleValue= ele.style[styleName]||0;
var callfun = call;
styleValue =parseInt(styleValue);
var curInterval = window.setInterval(function(){
if(curCount>count){
window.clearInterval(curInterval);
if(!!callfun){
call();
}
}else{
curCount=curCount+1;
var tempValue = curAnimateFun(styleValue,to,curCount,count);
ele.style[styleName] = tempValue+"px";
}
},timespan);
}
var call = function(){
alert(123);
}
document.getElementById("btn").onclick= function(){
animateFun(document.getElementById("res"),'left',300,call);
}
document.getElementById("btn1").onclick= function(){
animateFun(document.getElementById("res"),'left',0,call);
}
}
</script>
</head>
<body>
<div id="res" style="width:100px; height:100px; background-color:#339966; position:absolute; top:0; left:0"></div>
<input type="button" style="margin-top:200px;" value="动起来" id="btn"/>
<input type="button" style="margin-top:200px; margin-left:50px;" id="btn1" value="回去"/>
</body>
</html>
|
