Question

如何写一个通用的JavaScript效果库

Answer 1

代码如下:
　　/*
　　这个函数的代码来自 Prototype.js http://prototype.conio.net/
　　如果页面引用了prototype.js ,则可以删除下面这个函数,
　　当然,即使不删除也没关系,因为作了简单的兼容性判断
　　*/
　　(function(){
　　if (!("Prototype" in window)){
　　Prototype={emptyFunction:function(){}};
　　Class ={
　　create: function(){return function(){this.initialize.apply(this, arguments)}}
　　};
　　$ = function(element){
　　return typeof(element)=="string"?document.getElementById(element):element
　　};
　　$A= function(arrLike){
　　for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];
　　return ret
　　};
　　Number.prototype.toColorPart =function(){return String("00"+this.toString(16)).slice(-2)};
　　Function.prototype.bind = function() {
　　var __method = this, args = $A(arguments), object = args.shift();
　　return function(){return __method.apply(object, args.concat($A(arguments)))}
　　}
　　Position={
　　cumulativeOffset: function(element) {
　　var valueT = 0, valueL = 0;
　　do {
　　valueT += element.offsetTop || 0;
　　valueL += element.offsetLeft || 0;
　　element = element.offsetParent;
　　} while (element);
　　return [valueL, valueT];
　　}
　　}
　　}
　　})()
　　/*
　　1.读取/设置 透明度,
　　2.如果只传了一个参数element,则返回 element的透明度 (0<value<1)
　　3.如果传了两个参数 element和value 则把element的透明度设置为value value范围 0-1
　　*/
　　function Opacity(element,value){
　　// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
　　var ret;
　　if (value===undefined){ //读取
　　if (!/msie/i.test(navigator.userAgent))
　　if (ret=element.style.opacity) return parseFloat(ret);
　　try{return element.filters.item('alpha').opacity/100}catch(x){return 1.0}
　　}else{ //设置
　　value=Math.min(Math.max(value,0.00001),0.999999) //这句修复一些非ie浏览器opacity不能设置为1的bug
　　if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")"
　　return element.style.opacity=value
　　}
　　}
　　那么怎么设计这个Effect效果库呢。
　　首先，它的入口应该简洁。
　　1.一个是要使用效果的元素 element
　　2.另一个是将要使用什么效果 options
　　options应该是扩展性强的，方便用户使用的。我们把它设计成哈稀结构。
　　比如 options={x:100,y:100} 表示 将element移动到坐标 100,100
　　options={w:200,h:200} 表示将element的大小改变为 width=200,height=200
　　他们可以重叠，也可以确省 比如 options={h:20,y:20} 这表示将element移动到 top=20的位置，而且在移动的过程中让他的大小改变为 height=20 ，同时，原来的left坐标和宽度都不发生改变，这是不是在做QQ的滑动效果呢？
　　还有控制效果的几个关键因素 duration(整个效果的时间),delay(延迟几秒才开始效果),fps(频率快慢) 都通过options传进来
　　
代码如下:
　　Effect =Class.create();
　　Effect.Fn =new Object();
　　Effect.Init =new Object();
　　// By Go_Rush(阿舜) from http://ashun.cnblogs.com/
　　Effect.prototype={
　　initialize: function(element,options) {
　　this.element = $(element);
　　this.options = options || {};
　　this.duration = (this.options.duration || 2) * 1000; //效果执行时间
　　this.fps = this.options.fps || 40; //频率
　　//当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
　　this.steps = Math.floor(this.duration/this.fps);
　　this.maxSteps = this.steps; //整个效果的步长
　　this.setting = new Object();
　　this.timer = null;
　　if (this.options.delay){ // 延时处理
　　var _this=this;
　　setTimeout(function(){
　　_this.setup(_this);
　　(_this.options.onStart || Prototype.emptyFunction)(_this);
　　_this.run();
　　}, _this.options.delay*1000);
　　}else{
　　this.setup(this);
　　(this.options.onStart || Prototype.emptyFunction)(this);
　　this.run();
　　}
　　},
　　run: function() {
　　if (this.isFinished()) return (this.options.onComplete || Prototype.emptyFunction)(this);
　　if (this.timer) clearTimeout(this.timer);
　　this.duration -= this.fps;
　　this.steps--;
　　var pos=1-this.steps/this.maxSteps ; //总进度的百分比
　　this.loop(this,pos);
　　(this.options.onUpdate || Prototype.emptyFunction)(this,pos);
　　this.timer = setTimeout(this.run.bind(this), this.fps);
　　},
　　isFinished: function() {
　　return this.steps <= 0;
　　},
　　setup:function(effect){ //初始化设置所有效果单元
　　for(var key in Effect.Init){
　　if (typeof(Effect.Init[key])!="function") continue;
　　try{Effect.Init[key](this)}catch(x){}
　　}
　　},
　　loop:function(effect,pos){ //执行所有效果单元
　　for(var key in Effect.Fn){
　　if (typeof(Effect.Fn[key])!="function") continue;
　　try{Effect.Fn[key](effect,pos)}catch(x){}
　　}
　　}
　　}
　　当动态效果改变的时候，比如淡出，我们让一个element慢慢的变淡变小，并消失。
　　在不用效果库的情况下 只用 element.style.display="none" 就做到了。
　　用效果库后，element.style 的 透明度 opacity, 尺寸 width,height 甚至位置 left,top都发生了改变。
　　直到 element的大小改变为 0或者opactiy为0的时候他才会消失 display="none"
　　那么，当下次再让他出现的时候，怎么恢复他的原始信息呢。比如 width.height,opacity等。
　　在上面的代码中 我们用 effect.setting 保存效果发生前的所有element信息.
　　注意以上三个自定义函数 onStart,onUpdate,onComplete 他们都是通过 options传进来的调用者自定义函数。
　　分别在效果发生以前，效果发生时，效果发生完毕后执行。传入的参数可以查阅effect的所有对象。
　　看到这里，细心的看官可能注意到，这个效果库实际上什么效果都没有做，他只是搭了一个空架子。
　　Effect.Init 给我们留了一个空接口供 setup方法调用，Effect.Fn也是一个空接口供loop方法调用。
　　下面我们要做的是扩展 Effect.Init和 Effect.Fn 来充实效果库。
　　先来一个大家最熟悉的 淡入淡出
　　Effect.Init 里面的所有成员函数都会被 effect.setup 执行， 这个执行动作在效果开始之前，因此这里
　　适合做一些初始化的动作。 比如把一些初始信息保存到 effect.setting里面供以后使用。
　　Effect.Fn 里面的所有成员函数都会被 effect.loop 执行， 这个执行动作在效果运行中，因此这里
　　就要放核心效果代码，比如计算，改变效果增量等等。
　　
代码如下:
　　if (effect.options.opacity===undefined) return;
　　effect.setting.opacity=Opacity(effect.element);
　　}
　　Effect.Fn.opacity=function(effect,pos){
　　if (effect.options.opacity===undefined) return;
　　Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);
　　}

Answer 2

库文件只是把经常用到的函数整理放到一起而已，如果要做特殊点的效果或定制模块之类的，还需要自己开发的
常用的，比如说动画的旋转，可以写个通用函数
function rotate(rDeg){
//旋转代码
}
然后传入rDeg参数值调用
rotate(60);
解决了开发过程中的一些高度重复的问题