程序源码
复制代码 代码如下:
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();
}
演示代码:
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;
}();
window.onload = function() {
var t$ = function(id) { return document.getelementbyid(id); }
var t$$ = function(n) { return document.getelementsbyname(n); }
var demo = t$('demo'); var btns = t$$('fx');
function disablebutton() {
for (var i = 0, len = btns.length; i < len; ++i) {
btns[i].disabled = 'disabled';
}
}
function resetbutton() {
for (var i = 0, len = btns.length; i < len; ++i) {
btns[i].disabled = '';
}
}
// 宽度渐变
function changewidth() {
var fx = 'width', from = demo.clientwidth, to = from - 270, time = 1000;
var callback = function() {
from = demo.clientwidth; to = from + 270;
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();
}
// 高度渐变
function changeheight() {
var fx = 'height', from = demo.clientheight, to = from + 100, time = 1000;
var callback = function() {
from = demo.clientheight; to = from - 100;
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();
}
// 透明度渐变
function changeopacity() {
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();
}
// 边框渐变
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 {
//}
}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]