|
Posted on
2007-01-16 09:11
Go_Rush
阅读( 5120)
评论()
编辑
收藏
举报
续上回: 怎样写一个通用的JavaScript效果库!(1/2)
在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 以及他们的实现原理和详细代码
今天这个随笔主要是扩展其他常用效果插件,毕竟框架只能是个空壳,内容还是要自己充实。
如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先。。。
续上回: 怎样写一个通用的JavaScript效果库!(1/2) 在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用 效果插件,毕竟框架只能是个空壳,内容还是要自己充实。 如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 移动, 这里是move to 就是移动到 x,y 当然,大家也可以再扩展一个move by 移动x个象素
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.move=function(effect) { //初始化
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// zoom by Go_Rush(阿舜) from http://ashun.cnblogs.com/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.zoom=function(effect) {
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// size 同上,是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.size=function(effect) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.bgcolor=function(effect) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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格式
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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()
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// 透明度,这个上个贴过了 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.opacity=function(effect) {
if (effect.options.opacity===undefined) return;
effect.setting.opacity=Opacity(effect.element);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
这里 effect.setting 是非常有用而且非常重要的冬冬,所有的通过options传进来自定义函数都可以 通过effect.setting来获取element最初的设置。 在很多场合,我们需要在 options 中传一个 onComplete 函数进来, 用来在效果执行完毕后,打扫战场,恢复一些设置。 这些效果是可以重叠的,大家可以看看下面我写的例子。 写了十来个例子,应该很详细了。 完整的,可调试代码和例子如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif) 全部代码附范例
<script language="javascript">
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//*
这个函数的代码来自 Prototype.js http://prototype.conio.net/
如果页面引用了prototype.js ,则可以删除下面这个函数,
当然,即使不删除也没关系,因为作了简单的兼容性判断
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) (function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) if (!("Prototype" in window)) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Prototype= {emptyFunction:function() {}};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Class = {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) create: function() {return function() {this.initialize.apply(this, arguments)}}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) $ = function(element) {
return typeof(element)=="string"?document.getElementById(element):element
};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) $A= function(arrLike) {
for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];
return ret
};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Number.prototype.toColorPart =function() {return String("00"+this.toString(16)).slice(-2)};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) return function() {return __method.apply(object, args.concat($A(arguments)))}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) Position= {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
}
}
})()
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//*
1.读取/设置 透明度,
2.如果只传了一个参数element,则返回 element的透明度 (0<value<1)
3.如果传了两个参数 element和value 则把element的透明度设置为value value范围 0-1
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function Opacity(element,value) {
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var ret;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) if (value===undefined) { //读取
if (!/msie/i.test(navigator.userAgent))
if (ret=element.style.opacity) return parseFloat(ret);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) try {return element.filters.item('alpha').opacity/100}catch(x) {return 1.0}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }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
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Effect =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.prototype= {
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) initialize: function(element,options) {
this.element = $(element);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) if (this.options.delay) { // 延时处理
var _this=this;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) setTimeout(function() {
_this.setup(_this);
(_this.options.onStart || Prototype.emptyFunction)(_this);
_this.run();
}, _this.options.delay*1000);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) }else {
this.setup(this);
(this.options.onStart || Prototype.emptyFunction)(this);
this.run();
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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);
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) isFinished: function() {
return this.steps <= 0;
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) setup:function(effect) { //初始化设置所有效果单元
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) for(var key in Effect.Init) {
if (typeof(Effect.Init[key])!="function") continue;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) try {Effect.Init[key](this)}catch(x) {}
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) loop:function(effect,pos) { //执行所有效果单元
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) for(var key in Effect.Fn) {
if (typeof(Effect.Fn[key])!="function") continue;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) try {Effect.Fn[key](effect,pos)}catch(x) {}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 移动, 这里是move to 就是移动到 x,y 当然,大家也可以再扩展一个move by 移动x个象素
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.move=function(effect) { //初始化
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// zoom
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.zoom=function(effect) {
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// size 同上,是 size to, 改变到指定大小
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.size=function(effect) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// 背景色
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.bgcolor=function(effect) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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格式
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) 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
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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()
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
// 透明度,这个上个贴过了
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) Effect.Init.opacity=function(effect) {
if (effect.options.opacity===undefined) return;
effect.setting.opacity=Opacity(effect.element);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) 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);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) /**//****************************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo1() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {bgcolor:"#3a3e3f"})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo2() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {w:150,h:100})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo3() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:100,y:100})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo4() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {opacity:0.2})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo5() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {zoom:2})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function foo6() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {w:222,h:111,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:100,y:300,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {opacity:0.7,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {zoom:2,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {bgcolor:"#111111",onComplete:function() {
alert("all done")
}})
}})
}})
}})
}})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix1() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {zoom:4,opacity:0,x:0,y:0,onComplete:function(eff) {
eff.element.style.display="none"
}})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix2() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {y:80,h:22})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix3() { //注意这种复合
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {h:22,onComplete:function(eff) {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {w:0})
}})
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {opacity:0,duration:4})
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix4() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {opacity:0,zoom:0})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix5() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {bgcolor:"#000000",onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {bgcolor:"#ffffff"})
}})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var i=0;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) function fix6() {
if (++i>5) return false;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:280,delay:0.5,duration:0.1,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:320,duration:0.1,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:280,duration:0.1,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:320,duration:0.1,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:280,duration:0.1,onComplete:function() {
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif) new Effect("div1", {x:300,duration:0.1,onComplete:function() {
fix6()
}})
}})
}})
}})
}})
}})
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<br />
<br />
<button onclick="javascript:location.reload()"> 每次效果后按这里恢复</button>
<br/>
<br/>
注意 FireFox 不支持 Zoom
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
|