当前位置:编程学习 > JS >>

如何写一个通用的JavaScript效果库!(1/2)

答案:JavaScript的动态效果最基本的是 动态改变大小,移动位置,改变透明度,改变颜色等等。
而其他一些比较炫的效果无非是对这些最基本效果的组合和运用。

现在网上已经有很多很不错的优秀Javascript库或者效果库,我们是否有必要再造轮子呢?
放眼望去,Yahoo UI, 基于Prototype的scriptaculous, Rico, JQuery, Dojo,还有很多很多。
这些库都带有很不错很优秀的动态效果。我们可以直接使用。
但是对于一些中小型项目来说,只是偶尔用到一两个特效,就没有必要引用整个框架,要知道
这些家伙体积都不小哦. prototype.js 50K, scripttaculous的 effects.js也有40-50k dojo,yui 更大。

在大多数情况下我们需要一个小巧独立(300行代码以内),无侵入性的效果库。.即使有现有的轮子,
我们不但要学会怎么使用轮子,更要学会如何亲手造一个轮子。
基于以上原因,我们今天来重写一个灵活的,扩展性强的,小巧的,跨浏览器的动态效果库。

考虑到prototype.js 用户群的广泛性,我的部分代码引用了prototype.js,当然,我说过 ,我们要做一个独立
的效果库,即使在没有prototype.js的情况下,也要让代码正常工作。

先做一些准备工作。下面这些代码是任何效果库中必不可少的,因为它负责一些类似取位置坐标,
设置,获取element的透明度等这些基础工作。

代码:

复制代码 代码如下:

/*
这个函数的代码来自 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传进来的调用者自定义函数。
分别在效果发生以前,效果发生时,效果发生完毕后执行。传入的

上一个:使用prototype.js 的时候应该特别注意的几个问题.
下一个:FireFox中textNode分片的问题

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,