程序源码 复制代码 代码如下: 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(); } 演示代码: new document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　this和执行上下文实现代码

函数的执行上下文由当前的运行环境而定： 1. 全局变量和全局函数附属于全局对象(window)，因此使用”var”或”this”两种方法定义全局变量是等效的。 2. 执行上下文和作用域不同。执行上下文在运行时确定，随时可能>>>详细阅读

本文标题：javascript简易动画类(div渐变)

地址：http://www.17bianji.com/kaifa2/JS/26107.html

 1/2    1