javascript简易动画类(div渐变)

ttx9n · 发表于 2010-7-4 23:02:48

javascript简易动画类宽度渐变高度渐变透明度渐变边框渐变综合渐变程序源码
复制代码代码如下:
function Animate(el, prop, opts) {
this.el = el;
this.prop = prop;
this.from = opts.from;
this.to = opts.to;
this.time = opts.time;
this.callback = opts.callback;
this.animDiff = this.to - this.from;
}

Animate.prototype._setStyle = function(val) {
switch(this.prop) {
case 'opacity':
this.el.style[this.prop] = val;
this.el.style.filter = 'alpha(opacity=' + val * 100 + ')';
break;
default:
this.el.style[this.prop] = val + 'px';
break;
}
}

Animate.prototype._animate = function() {
var that = this;
this.now = new Date();
this.diff = this.now - this.startTime;

if (this.diff > this.time) {
this._setStyle(this.to);

if (this.callback) {
this.callback.call(this);
}
clearInterval(this.timer);
return;
}

this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);
this.val = (this.animDiff * this.percentage) + this.from;
this._setStyle(this.val);
}

Animate.prototype.start = function() {
var that = this;
this.startTime = new Date();
clearInterval(this.timer);
this.timer = setInterval(function() {
that._animate.call(that);
}, 4);
}

Animate.canTransition = function() {
var el = document.createElement('foo');
el.style.cssText = '-webkit-transition: all .5s linear;';
return !!el.style.webkitTransitionProperty;
}();

使用方法
复制代码代码如下:
// 透明度渐变
function changeOpacity() {
// 透明度渐变从1 - 0 渐变时间1000ms
var fx = 'opacity', from = 1, to = 0, time = 1000;
// 渐变完毕执行的回调函数
var callback = function() {
from = 0; to = 1;
new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start();
}
// 实例化渐变函数
new Animate(demo, fx, {
from: from,
to: to,
time: time,
callback: callback
}).start();
}

演示代码:

<!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> 
<title> new document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<center> 
<input type="button" name="fx" value="宽度渐变" id="wt-cg"/> 
<input type="button" name="fx" value="高度渐变" id="hi-cg"/> 
<input type="button" name="fx" value="透明度渐变" id="op-cg"/> 
<input type="button" name="fx" value="边框渐变" id="bd-cg"/> 
<input type="button" name="fx" value="综合渐变" id="zh-cg"/> 
 
</center> 
<script> 
function Animate(el, prop, opts) { 
this.el = el; 
this.prop = prop; 
this.from = opts.from; 
this.to = opts.to; 
this.time = opts.time; 
this.callback = opts.callback; 
this.animDiff = this.to - this.from; 
}

Animate.prototype._setStyle = function(val) { 
switch(this.prop) { 
case 'opacity': 
this.el.style[this.prop] = val; 
this.el.style.filter = 'alpha(opacity=' + val * 100 + ')'; 
break; 
default: 
this.el.style[this.prop] = val + 'px'; 
break; 
} 
}

Animate.prototype._animate = function() { 
var that = this; 
this.now = new Date(); 
this.diff = this.now - this.startTime;

if (this.diff > this.time) { 
this._setStyle(this.to);

if (this.callback) { 
this.callback.call(this); 
} 
clearInterval(this.timer); 
return; 
}

this.percentage = (Math.floor((this.diff / this.time) * 100) / 100); 
this.val = (this.animDiff * this.percentage) + this.from; 
this._setStyle(this.val); 
}

Animate.prototype.start = function() { 
var that = this; 
this.startTime = new Date(); 
clearInterval(this.timer); 
this.timer = setInterval(function() { 
that._animate.call(that); 
}, 4); 
}

Animate.canTransition = function() { 
var el = document.createElement('foo'); 
el.style.cssText = '-webkit-transition: all .5s linear;'; 
return !!el.style.webkitTransitionProperty; 
}();

// 边框渐变 
function changeBorderWidth() { 
var fx = 'borderWidth', from = 2, to = 10, time = 1000; 
var callback = function() { 
from = 10; to = 2; 
new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); 
} 
new Animate(demo, fx, { 
from: from, 
to: to, 
time: time, 
callback: callback 
}).start(); 
}

T$('wt-cg').onclick = function() { 
disableButton(); changeWidth(); 
} 
T$('hi-cg').onclick = function() { 
disableButton(); changeHeight(); 
} 
T$('op-cg').onclick = function() { 
disableButton(); changeOpacity(); 
} 
T$('bd-cg').onclick = function() { 
disableButton(); changeBorderWidth(); 
} 
T$('zh-cg').onclick = function() { 
disableButton(); changeWidth(); changeHeight(); changeOpacity(); 
} 
//if (Animate.canTransition) { 
//demo.style.webkitTransition = 'opacity 3s ease-in'; 
//demo.style.opacity = 0; 
//} else {

//} 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

r8st9 · 发表于 2022-10-29 21:41:40

dfdsafdsfdsfdsf

回复用户1 · 发表于 2022-12-7 11:31:05

先把创新班才能下班才能下班

do827261756 · 发表于 2023-4-15 17:16:21

天天源码论坛

pb_tjc · 发表于 2023-8-29 22:40:16

下载来瞧瞧

6ox8dn · 发表于 2023-11-28 09:08:02

hi哦回复iOS就看见

回复用户1 · 发表于 2024-3-2 06:20:28

老衲笑纳了

feiyasqhr · 发表于 2024-5-24 00:52:40

数据库了多久撒快乐的健身卡啦

shw5ovr · 发表于 2024-9-8 18:00:09

。。。。。。。。。。。。。。。

cxst1h57 · 发表于 2024-9-23 06:36:38

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript简易动画类(div渐变)

相关帖子