怎样写一个通用的JavaScript效果库！
2008-03-06 17:20
447 查看
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传进来的调用者自定义函数。
分别在效果发生以前，效果发生时，效果发生完毕后执行。传入的参数可以查阅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);
}
下面贴出可调试代码(空效果库和淡入浅出插件)：（可以拷贝到一个html运行，测试）
可运行代码
<script language="javascript">
/**//*
这个函数的代码来自 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)
{
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 =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
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; //频率
this.steps = Math.floor(this.duration/this.fps); //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
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)
{}
}
}
}
Effect.Init.opacity=function(effect)
{
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);
}
var foo1=function()
{ //最简单的调用方式
new Effect("div1",
{opacity:0.2})
}
var foo2=function()
{
new Effect("div1",
{opacity:0.2,delay:3}) //延迟3秒
}
var foo3=function()
{
new Effect("div1",
{opacity:0.2,duration:5}) //效果执行5秒，默认是2秒的
}
var foo4=function()
{ //自定义函数
new Effect("div1",
{
opacity:0.2,
onStart:function(eff)
{alert("效果运行时注意document.title,运行后注意div内的文字")},
onUpdate:function(eff,p)
{document.title=p.toFixed(2)},
onComplete:function(eff)
{eff.element.innerHTML="运行完毕"}
})
}
var foo5=function()
{ //先变淡后变深
new Effect("div1",
{opacity:0.2,onComplete:function(eff)
{
new Effect(eff.element,
{opacity:1,delay:1})
}})
}
function foo()
{
new Effect("div1",
{opacity:1,duration:1})
}
</script>
<button onclick="javascript:foo1()">执行foo1</button>
<button onclick="javascript:foo2()">执行foo2(延迟)</button>
<button onclick="javascript:foo3()">执行foo3(5秒)</button>
<button onclick="javascript:foo4()">执行foo4(自定义函数)</button>
<button onclick="javascript:foo5()">执行foo5(先变淡后变深)</button>
<br /><br />每次调用效果后点下面的恢复按钮<br /><br />
<button onclick="javascript:foo()">恢 复</button>
<div id="div1" style="border:solid;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;">
<font color="blue">
Go_Rush(阿舜) @ http://ashun.cnblogs.com/ <br />
Go_Rush(阿舜) @ http://ashun.cnblogs.com/ <br />
</font>
</div>
在上个随笔中贴出了效果库的整体框架，和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件，毕竟框架只能是个空壳，内容还是要自己充实。
如果看过了我上篇的实现细节，这里就不多说废话了，来段代码先：
/**//****************************************************/
// 移动， 这里是move to 就是移动到 x,y 当然，大家也可以再扩展一个move by 移动x个象素
Effect.Init.move=function(effect)
{ //初始化
if (effect.options.x!==undefined || effect.options.y!==undefined)
{
var pos=Position.cumulativeOffset(effect.element);
effect.setting.left =pos[0];
effect.setting.top =pos[1];
effect.setting.position =effect.element.style.position;
effect.element.style.position ="absolute"
effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;
effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;
}
}
Effect.Fn.move=function(effect,pos)
{ //效果
if (effect.options.x===undefined && effect.options.y===undefined) return
effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px";
effect.element.style.top =effect.setting.top + (effect.options.y-effect.setting.top ) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// zoom by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.zoom=function(effect)
{
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1)
{
effect.options.w=effect.element.offsetWidth * effect.options.zoom;
effect.options.h=effect.element.offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(effect,pos)
{
if (effect.options.zoom===undefined) return;
effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos
}
/**//****************************************************/
/**//****************************************************/
// size 同上，是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.size=function(effect)
{
if (effect.options.w!==undefined || effect.options.h!==undefined)
{
effect.setting.overflow =effect.element.style.overflow || 'visible';
effect.setting.width =effect.element.offsetWidth;
effect.setting.height =effect.element.offsetHeight;
effect.element.style.overflow ="hidden"
effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w;
effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;
}
}
Effect.Fn.size=function(effect,pos)
{
if (effect.options.w===undefined && effect.options.h===undefined) return;
effect.element.style.width =effect.setting.width + (effect.options.w-effect.setting.width ) * pos +"px";
effect.element.style.height=effect.setting.height+ (effect.options.h-effect.setting.height) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.bgcolor=function(effect)
{
if (effect.options.bgcolor!==undefined && /^/#?[a-f0-9]
{6}$/i.test(effect.options.bgcolor))
{
var color =effect.element.style.backgroundColor || "#ffffff";
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
if (/rgb/i.test(color))
{ // "rgb(255, 0, 255)"
//var arr=color.replace(/[rgb/(/s/)]/gi,"").split(",")
var arr=eval(color.replace("rgb","new Array"))
color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()
}
effect.setting.bgcolor=color
}
}
Effect.Fn.bgcolor=function(effect,pos)
{
if (effect.options.bgcolor===undefined) return;
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}
/**//****************************************************/
/**//****************************************************/
// 透明度，这个上个贴过了 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.opacity=function(effect)
{
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);
}
/**//****************************************************/
这里 effect.setting 是非常有用而且非常重要的冬冬，所有的通过options传进来自定义函数都可以
通过effect.setting来获取element最初的设置。 在很多场合，我们需要在 options 中传一个 onComplete
函数进来， 用来在效果执行完毕后，打扫战场，恢复一些设置。
这些效果是可以重叠的，大家可以看看下面我写的例子。
写了十来个例子，应该很详细了。
完整的，可调试代码和例子如下：
全部代码附范例
<script language="javascript">
/**//*
这个函数的代码来自 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 =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
Effect.prototype=
{
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
initialize: function(element,options)
{
this.element = $(element);
this.options = options ||
{};
this.duration = (this.options.duration || 2) * 1000; //效果执行时间
this.fps = this.options.fps || 50; //频率
this.steps = Math.floor(this.duration/this.fps); //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
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)
{}
}
}
}
/**//****************************************************/
// 移动， 这里是move to 就是移动到 x,y 当然，大家也可以再扩展一个move by 移动x个象素
Effect.Init.move=function(effect)
{ //初始化
if (effect.options.x!==undefined || effect.options.y!==undefined)
{
var pos=Position.cumulativeOffset(effect.element);
effect.setting.left =pos[0];
effect.setting.top =pos[1];
effect.setting.position =effect.element.style.position;
effect.element.style.position ="absolute"
effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;
effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;
}
}
Effect.Fn.move=function(effect,pos)
{ //效果
if (effect.options.x===undefined && effect.options.y===undefined) return
effect.element.style.top =effect.setting.top + (effect.options.y-effect.setting.top ) * pos +"px";
effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// zoom
Effect.Init.zoom=function(effect)
{
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1)
{
effect.options.w=effect.element.offsetWidth * effect.options.zoom;
effect.options.h=effect.element.offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(effect,pos)
{
if (effect.options.zoom===undefined) return;
effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos
}
/**//****************************************************/
/**//****************************************************/
// size 同上，是 size to, 改变到指定大小
Effect.Init.size=function(effect)
{
if (effect.options.w!==undefined || effect.options.h!==undefined)
{
effect.setting.overflow =effect.element.style.overflow || 'visible';
effect.setting.width =effect.element.offsetWidth;
effect.setting.height =effect.element.offsetHeight;
effect.element.style.overflow ="hidden"
effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w;
effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;
}
}
Effect.Fn.size=function(effect,pos)
{
if (effect.options.w===undefined && effect.options.h===undefined) return;
effect.element.style.width =effect.setting.width + (effect.options.w-effect.setting.width ) * pos +"px";
effect.element.style.height=effect.setting.height+ (effect.options.h-effect.setting.height) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// 背景色
Effect.Init.bgcolor=function(effect)
{
if (effect.options.bgcolor!==undefined && /^/#?[a-f0-9]
{6}$/i.test(effect.options.bgcolor))
{
var color =effect.element.style.backgroundColor || "#ffffff";
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
if (/rgb/i.test(color))
{ // "rgb(255, 0, 255)"
//var arr=color.replace(/[rgb/(/s/)]/gi,"").split(",")
var arr=eval(color.replace("rgb","new Array"))
color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()
}
effect.setting.bgcolor=color
}
}
Effect.Fn.bgcolor=function(effect,pos)
{
if (effect.options.bgcolor===undefined) return;
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}
/**//****************************************************/
/**//****************************************************/
// 透明度，这个上个贴过了
Effect.Init.opacity=function(effect)
{
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);
}
/**//****************************************************/
function foo1()
{
new Effect("div1",
{bgcolor:"#3a3e3f"})
}
function foo2()
{
new Effect("div1",
{w:150,h:100})
}
function foo3()
{
new Effect("div1",
{x:100,y:100})
}
function foo4()
{
new Effect("div1",
{opacity:0.2})
}
function foo5()
{
new Effect("div1",
{zoom:2})
}
function foo6()
{
new Effect("div1",
{w:222,h:111,onComplete:function()
{
new Effect("div1",
{x:100,y:300,onComplete:function()
{
new Effect("div1",
{opacity:0.7,onComplete:function()
{
new Effect("div1",
{zoom:2,onComplete:function()
{
new Effect("div1",
{bgcolor:"#111111",onComplete:function()
{
alert("all done")
}})
}})
}})
}})
}})
}
function fix1()
{
new Effect("div1",
{zoom:4,opacity:0,x:0,y:0,onComplete:function(eff)
{
eff.element.style.display="none"
}})
}
function fix2()
{
new Effect("div1",
{y:80,h:22})
}
function fix3()
{ //注意这种复合
new Effect("div1",
{h:22,onComplete:function(eff)
{
new Effect("div1",
{w:0})
}})
new Effect("div1",
{opacity:0,duration:4})
}
function fix4()
{
new Effect("div1",
{opacity:0,zoom:0})
}
function fix5()
{
new Effect("div1",
{bgcolor:"#000000",onComplete:function()
{
new Effect("div1",
{bgcolor:"#ffffff"})
}})
}
var i=0;
function fix6()
{
if (++i>5) return false;
new Effect("div1",
{x:280,delay:0.5,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:320,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:280,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:320,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:280,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:300,duration:0.1,onComplete:function()
{
fix6()
}})
}})
}})
}})
}})
}})
}
</script>
<fieldset>
<legend>单一效果</legend>
<button onclick="javascript:foo1()">颜 色 foo1</button>
<button onclick="javascript:foo2()">大 小 foo2</button>
<button onclick="javascript:foo3()">位 置 foo3</button>
<button onclick="javascript:foo4()">透 明 度 foo4</button>
<button onclick="javascript:foo5()">Zoom foo5</button>
<button onclick="javascript:foo6()">所有 foo6</button>
<br />
</fieldset>
<br />
<fieldset>
<legend>复合效果</legend>
<button onclick="javascript:fix1()"> 淡出fix1</button>
<button onclick="javascript:fix2()"> 折起fix2</button>
<button onclick="javascript:fix3()"> 慢慢变小消失 fix3</button>
<button onclick="javascript:fix4()"> 慢慢变小消失2 fix4</button>
<button onclick="javascript:fix5()"> 变色 fix5</button>
<button onclick="javascript:fix6()"> 震动5次 fix6</button>
<br />
</fieldset>
<br />
<br />
<button onclick="javascript:location.reload()"> 每次效果后按这里恢复</button>
<br/>
<br/>
注意 FireFox 不支持 Zoom
<div id="div1" style="border:1px solid red;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;z-index:2;background-color:#ffffff">
<a href="http://ashun.cnblogs.com/">Go_Rush(阿舜)</a>
<img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"><br />
</div>
现在网上已经有很多很不错的优秀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传进来的调用者自定义函数。
分别在效果发生以前，效果发生时，效果发生完毕后执行。传入的参数可以查阅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);
}
下面贴出可调试代码(空效果库和淡入浅出插件)：（可以拷贝到一个html运行，测试）
可运行代码
<script language="javascript">
/**//*
这个函数的代码来自 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)
{
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 =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
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; //频率
this.steps = Math.floor(this.duration/this.fps); //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
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)
{}
}
}
}
Effect.Init.opacity=function(effect)
{
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);
}
var foo1=function()
{ //最简单的调用方式
new Effect("div1",
{opacity:0.2})
}
var foo2=function()
{
new Effect("div1",
{opacity:0.2,delay:3}) //延迟3秒
}
var foo3=function()
{
new Effect("div1",
{opacity:0.2,duration:5}) //效果执行5秒，默认是2秒的
}
var foo4=function()
{ //自定义函数
new Effect("div1",
{
opacity:0.2,
onStart:function(eff)
{alert("效果运行时注意document.title,运行后注意div内的文字")},
onUpdate:function(eff,p)
{document.title=p.toFixed(2)},
onComplete:function(eff)
{eff.element.innerHTML="运行完毕"}
})
}
var foo5=function()
{ //先变淡后变深
new Effect("div1",
{opacity:0.2,onComplete:function(eff)
{
new Effect(eff.element,
{opacity:1,delay:1})
}})
}
function foo()
{
new Effect("div1",
{opacity:1,duration:1})
}
</script>
<button onclick="javascript:foo1()">执行foo1</button>
<button onclick="javascript:foo2()">执行foo2(延迟)</button>
<button onclick="javascript:foo3()">执行foo3(5秒)</button>
<button onclick="javascript:foo4()">执行foo4(自定义函数)</button>
<button onclick="javascript:foo5()">执行foo5(先变淡后变深)</button>
<br /><br />每次调用效果后点下面的恢复按钮<br /><br />
<button onclick="javascript:foo()">恢 复</button>
<div id="div1" style="border:solid;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;">
<font color="blue">
Go_Rush(阿舜) @ http://ashun.cnblogs.com/ <br />
Go_Rush(阿舜) @ http://ashun.cnblogs.com/ <br />
</font>
</div>
在上个随笔中贴出了效果库的整体框架，和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件，毕竟框架只能是个空壳，内容还是要自己充实。
如果看过了我上篇的实现细节，这里就不多说废话了，来段代码先：
/**//****************************************************/
// 移动， 这里是move to 就是移动到 x,y 当然，大家也可以再扩展一个move by 移动x个象素
Effect.Init.move=function(effect)
{ //初始化
if (effect.options.x!==undefined || effect.options.y!==undefined)
{
var pos=Position.cumulativeOffset(effect.element);
effect.setting.left =pos[0];
effect.setting.top =pos[1];
effect.setting.position =effect.element.style.position;
effect.element.style.position ="absolute"
effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;
effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;
}
}
Effect.Fn.move=function(effect,pos)
{ //效果
if (effect.options.x===undefined && effect.options.y===undefined) return
effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px";
effect.element.style.top =effect.setting.top + (effect.options.y-effect.setting.top ) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// zoom by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.zoom=function(effect)
{
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1)
{
effect.options.w=effect.element.offsetWidth * effect.options.zoom;
effect.options.h=effect.element.offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(effect,pos)
{
if (effect.options.zoom===undefined) return;
effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos
}
/**//****************************************************/
/**//****************************************************/
// size 同上，是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.size=function(effect)
{
if (effect.options.w!==undefined || effect.options.h!==undefined)
{
effect.setting.overflow =effect.element.style.overflow || 'visible';
effect.setting.width =effect.element.offsetWidth;
effect.setting.height =effect.element.offsetHeight;
effect.element.style.overflow ="hidden"
effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w;
effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;
}
}
Effect.Fn.size=function(effect,pos)
{
if (effect.options.w===undefined && effect.options.h===undefined) return;
effect.element.style.width =effect.setting.width + (effect.options.w-effect.setting.width ) * pos +"px";
effect.element.style.height=effect.setting.height+ (effect.options.h-effect.setting.height) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.bgcolor=function(effect)
{
if (effect.options.bgcolor!==undefined && /^/#?[a-f0-9]
{6}$/i.test(effect.options.bgcolor))
{
var color =effect.element.style.backgroundColor || "#ffffff";
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
if (/rgb/i.test(color))
{ // "rgb(255, 0, 255)"
//var arr=color.replace(/[rgb/(/s/)]/gi,"").split(",")
var arr=eval(color.replace("rgb","new Array"))
color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()
}
effect.setting.bgcolor=color
}
}
Effect.Fn.bgcolor=function(effect,pos)
{
if (effect.options.bgcolor===undefined) return;
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}
/**//****************************************************/
/**//****************************************************/
// 透明度，这个上个贴过了 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.opacity=function(effect)
{
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);
}
/**//****************************************************/
这里 effect.setting 是非常有用而且非常重要的冬冬，所有的通过options传进来自定义函数都可以
通过effect.setting来获取element最初的设置。 在很多场合，我们需要在 options 中传一个 onComplete
函数进来， 用来在效果执行完毕后，打扫战场，恢复一些设置。
这些效果是可以重叠的，大家可以看看下面我写的例子。
写了十来个例子，应该很详细了。
完整的，可调试代码和例子如下：
全部代码附范例
<script language="javascript">
/**//*
这个函数的代码来自 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 =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
Effect.prototype=
{
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
initialize: function(element,options)
{
this.element = $(element);
this.options = options ||
{};
this.duration = (this.options.duration || 2) * 1000; //效果执行时间
this.fps = this.options.fps || 50; //频率
this.steps = Math.floor(this.duration/this.fps); //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
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)
{}
}
}
}
/**//****************************************************/
// 移动， 这里是move to 就是移动到 x,y 当然，大家也可以再扩展一个move by 移动x个象素
Effect.Init.move=function(effect)
{ //初始化
if (effect.options.x!==undefined || effect.options.y!==undefined)
{
var pos=Position.cumulativeOffset(effect.element);
effect.setting.left =pos[0];
effect.setting.top =pos[1];
effect.setting.position =effect.element.style.position;
effect.element.style.position ="absolute"
effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;
effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;
}
}
Effect.Fn.move=function(effect,pos)
{ //效果
if (effect.options.x===undefined && effect.options.y===undefined) return
effect.element.style.top =effect.setting.top + (effect.options.y-effect.setting.top ) * pos +"px";
effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// zoom
Effect.Init.zoom=function(effect)
{
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1)
{
effect.options.w=effect.element.offsetWidth * effect.options.zoom;
effect.options.h=effect.element.offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(effect,pos)
{
if (effect.options.zoom===undefined) return;
effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos
}
/**//****************************************************/
/**//****************************************************/
// size 同上，是 size to, 改变到指定大小
Effect.Init.size=function(effect)
{
if (effect.options.w!==undefined || effect.options.h!==undefined)
{
effect.setting.overflow =effect.element.style.overflow || 'visible';
effect.setting.width =effect.element.offsetWidth;
effect.setting.height =effect.element.offsetHeight;
effect.element.style.overflow ="hidden"
effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w;
effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;
}
}
Effect.Fn.size=function(effect,pos)
{
if (effect.options.w===undefined && effect.options.h===undefined) return;
effect.element.style.width =effect.setting.width + (effect.options.w-effect.setting.width ) * pos +"px";
effect.element.style.height=effect.setting.height+ (effect.options.h-effect.setting.height) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// 背景色
Effect.Init.bgcolor=function(effect)
{
if (effect.options.bgcolor!==undefined && /^/#?[a-f0-9]
{6}$/i.test(effect.options.bgcolor))
{
var color =effect.element.style.backgroundColor || "#ffffff";
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
if (/rgb/i.test(color))
{ // "rgb(255, 0, 255)"
//var arr=color.replace(/[rgb/(/s/)]/gi,"").split(",")
var arr=eval(color.replace("rgb","new Array"))
color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()
}
effect.setting.bgcolor=color
}
}
Effect.Fn.bgcolor=function(effect,pos)
{
if (effect.options.bgcolor===undefined) return;
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}
/**//****************************************************/
/**//****************************************************/
// 透明度，这个上个贴过了
Effect.Init.opacity=function(effect)
{
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);
}
/**//****************************************************/
function foo1()
{
new Effect("div1",
{bgcolor:"#3a3e3f"})
}
function foo2()
{
new Effect("div1",
{w:150,h:100})
}
function foo3()
{
new Effect("div1",
{x:100,y:100})
}
function foo4()
{
new Effect("div1",
{opacity:0.2})
}
function foo5()
{
new Effect("div1",
{zoom:2})
}
function foo6()
{
new Effect("div1",
{w:222,h:111,onComplete:function()
{
new Effect("div1",
{x:100,y:300,onComplete:function()
{
new Effect("div1",
{opacity:0.7,onComplete:function()
{
new Effect("div1",
{zoom:2,onComplete:function()
{
new Effect("div1",
{bgcolor:"#111111",onComplete:function()
{
alert("all done")
}})
}})
}})
}})
}})
}
function fix1()
{
new Effect("div1",
{zoom:4,opacity:0,x:0,y:0,onComplete:function(eff)
{
eff.element.style.display="none"
}})
}
function fix2()
{
new Effect("div1",
{y:80,h:22})
}
function fix3()
{ //注意这种复合
new Effect("div1",
{h:22,onComplete:function(eff)
{
new Effect("div1",
{w:0})
}})
new Effect("div1",
{opacity:0,duration:4})
}
function fix4()
{
new Effect("div1",
{opacity:0,zoom:0})
}
function fix5()
{
new Effect("div1",
{bgcolor:"#000000",onComplete:function()
{
new Effect("div1",
{bgcolor:"#ffffff"})
}})
}
var i=0;
function fix6()
{
if (++i>5) return false;
new Effect("div1",
{x:280,delay:0.5,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:320,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:280,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:320,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:280,duration:0.1,onComplete:function()
{
new Effect("div1",
{x:300,duration:0.1,onComplete:function()
{
fix6()
}})
}})
}})
}})
}})
}})
}
</script>
<fieldset>
<legend>单一效果</legend>
<button onclick="javascript:foo1()">颜 色 foo1</button>
<button onclick="javascript:foo2()">大 小 foo2</button>
<button onclick="javascript:foo3()">位 置 foo3</button>
<button onclick="javascript:foo4()">透 明 度 foo4</button>
<button onclick="javascript:foo5()">Zoom foo5</button>
<button onclick="javascript:foo6()">所有 foo6</button>
<br />
</fieldset>
<br />
<fieldset>
<legend>复合效果</legend>
<button onclick="javascript:fix1()"> 淡出fix1</button>
<button onclick="javascript:fix2()"> 折起fix2</button>
<button onclick="javascript:fix3()"> 慢慢变小消失 fix3</button>
<button onclick="javascript:fix4()"> 慢慢变小消失2 fix4</button>
<button onclick="javascript:fix5()"> 变色 fix5</button>
<button onclick="javascript:fix6()"> 震动5次 fix6</button>
<br />
</fieldset>
<br />
<br />
<button onclick="javascript:location.reload()"> 每次效果后按这里恢复</button>
<br/>
<br/>
注意 FireFox 不支持 Zoom
<div id="div1" style="border:1px solid red;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;z-index:2;background-color:#ffffff">
<a href="http://ashun.cnblogs.com/">Go_Rush(阿舜)</a>
<img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"><br />
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 怎样写一个通用的JavaScript效果库！(1/2)
- 怎样写一个通用的JavaScript效果库！(2/2)
- 怎样写一个通用的JavaScript效果库！(1/2)
- 怎样写一个通用的JavaScript效果库！(2/2)
- 怎样写一个通用的JavaScript效果库！(1/2)(已更新链接)
- 如何写一个通用的JavaScript效果库！(1/2)
- 如何写一个通用的JavaScript效果库！(2/2)
- 如何写一个通用的JavaScript效果库！(1/2)
- javascript怎样选中一个checkbox，怎样设置它无效？
- 用javascript作一个通用向导说明
- 怎样在JavaScript里写一个swing把数据插入数据库
- 一个很通用的javascript的下拉菜单
- 关于怎样用javascript判断网页上我们想要必须选择的复选框至少选择一个的问题
- 怎样从 Javascript 传递一个变量到 PHP？
- 怎样用Javascript定义一个类
- 怎样在JavaScript里写一个swing把数据插入数据库
- 提供一个通用的Javascript验证页面输入的脚本给大家，并希望大家提意见呀
- 蛙蛙推荐：用javascript作一个通用向导
- 判断一个对象是不是JavaScript数组（怎样判断一个变量是数组）