JavaScript 漸變效果頁面圖片控制第2/2頁
更新時間:2008年09月15日 10:13:10 作者:
程序集合了寬度、高度、透明度、top、left的漸變,可以自定義漸變項目和各個項目的初始值結(jié)束值,還能以任意點(定點)為中心漸變。
程序代碼:
復(fù)制代碼 代碼如下:
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var FadeStruct = function(options){
this.run = false;//是否漸變
this.start = 0;//開始值
this.end = 0;//結(jié)束值
this.target = 0;//目標(biāo)值
Object.extend(this, options || {});
}
var Fade = Class.create();
Fade.prototype = {
initialize: function(obj, options) {
var obj = $(obj);
obj.style.overflow = "hidden";
this._obj = obj;
this._timer = null;//定時器
this._finish = true;//是否執(zhí)行完成
this._fun = function(){};//漸變程序
this._x = this._y = 0;//變換點位置
//設(shè)置獲取透明度程序
this._setOpacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; };
this._getOpacity = isIE ? function(){ return parseInt(obj.filters["alpha"].opacity); } : function(opacity){ return 100 * parseFloat(obj.currentStyle.opacity); };
//獲取邊框?qū)挾瘸绦?
this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }
this.SetOptions(options);
this.Mode = this.options.Mode;
this.Time = Math.abs(this.options.Time);
this.onFinish = this.options.onFinish;
//先設(shè)置特殊默認(rèn)值
this.Opacity = new FadeStruct({ end: 100 });
this.Top = new FadeStruct({ start: this._obj.offsetTop, end: this._obj.offsetTop });
this.Left = new FadeStruct({ start: this._obj.offsetLeft, end: this._obj.offsetLeft });
this.Height = new FadeStruct({ end: this._obj.offsetHeight - this._yBorder() });
this.Width = new FadeStruct({ end: this._obj.offsetWidth - this._xBorder() });
//再設(shè)置用戶默認(rèn)值
Object.extend(this.Opacity, this.options.Opacity);
Object.extend(this.Top, this.options.Top);
Object.extend(this.Left, this.options.Left);
Object.extend(this.Height, this.options.Height);
Object.extend(this.Width, this.options.Width);
//變換位置參數(shù)
this.Height.pos = Number(this.options.Height.pos);
this.Width.pos = Number(this.options.Width.pos);
//設(shè)置成默認(rèn)狀態(tài)
this.Show = !this.options.Show;
this.Step = 1;
this.Start();
//重新設(shè)置Step
this.Step = Math.abs(this.options.Step);
},
//設(shè)置默認(rèn)屬性
SetOptions: function(options) {
this.options = {//默認(rèn)值
Opacity: {},//透明漸變參數(shù)
Height: {},//高度漸變參數(shù)
Width: {},//寬度漸變參數(shù)
Top: {},//Top漸變參數(shù)
Left: {},//Left漸變參數(shù)
Step: 10,//變化率
Time: 10,//變化間隔
Mode: "both",//漸變順序
Show: false,//是否默認(rèn)打開狀態(tài)
onFinish: function(){}//完成時執(zhí)行
};
Object.extend(this.options, options || {});
},
//觸發(fā)
Start: function() {
clearTimeout(this._timer);
//取反表示要設(shè)置的狀態(tài)
this.Show = !this.Show;
//為避免透明度為null值,需要先設(shè)置一次透明度
if(this.Opacity.run){ this._setOpacity(this.Show ? this.Opacity.start : this.Opacity.end); }
//根據(jù)狀態(tài)設(shè)置目標(biāo)值
if(this.Show){
this.Opacity.target = this.Opacity.end;
this.Top.target = this.Top.end;
this.Left.target = this.Left.end;
this.Height.target = this.Height.end;
this.Width.target = this.Width.end;
} else{
this.Opacity.target = this.Opacity.start;
this.Top.target = this.Top.start;
this.Left.target = this.Left.start;
this.Height.target = this.Height.start;
this.Width.target = this.Width.start;
}
//設(shè)置漸變程序
switch (this.Mode.toLowerCase()) {
case "width" :
this._fun = function(){
this.SetWidth() && this.SetHeight();
//由于分了兩步,下面的步長變成兩倍
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;
}
break;
case "height" :
this._fun = function(){
this.SetHeight() && this.SetWidth();
//由于分了兩步,下面的步長變成兩倍
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;
}
break;
case "both" :
default :
this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); this.SetTop(); this.SetLeft();}
}
//獲取變換點位置
//由于設(shè)置變換點后與top和left變換有沖突只能執(zhí)行其一
if(this.Height.pos){ this._y = this._obj.offsetTop + this._obj.offsetHeight * this.Height.pos; this.Top.run = false; }
if(this.Width.pos){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos; this.Left.run = false; }
this.Run();
},
//執(zhí)行
Run: function() {
clearTimeout(this._timer);
this._finish = true;
//執(zhí)行漸變
this._fun();
//未完成繼續(xù)執(zhí)行
if (this._finish) { this.onFinish(); }
else { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); }
},
//設(shè)置高度漸變
SetHeight: function() {
var iGet = this.Get(this.Height, this._obj.offsetHeight - this._yBorder());
if(isNaN(iGet)) return true;
this._obj.style.height = iGet + "px";
//如果有變換點設(shè)置
if(this.Height.pos){ this._obj.style.top = this._y - this._obj.offsetHeight * this.Height.pos + "px"; }
return false;
},
//設(shè)置寬度漸變
SetWidth: function() {
var iGet = this.Get(this.Width, this._obj.offsetWidth - this._xBorder());
if(isNaN(iGet)) return true;
this._obj.style.width = iGet + "px";
if(this.Width.pos){ this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px"; }
return false;
},
//設(shè)置top漸變
SetTop: function() {
var iGet = this.Get(this.Top, this._obj.offsetTop);
if(isNaN(iGet)) return true;
this._obj.style.top = iGet + "px";
return false;
},
//設(shè)置left漸變
SetLeft: function() {
var iGet = this.Get(this.Left, this._obj.offsetLeft);
if(isNaN(iGet)) return true;
this._obj.style.left = iGet + "px";
return false;
},
//設(shè)置透明漸變
SetOpacity: function() {
var iGet = this.Get(this.Opacity, this._getOpacity());
if(isNaN(iGet)) return true;
this._setOpacity(iGet);
return false;
},
//獲取設(shè)置值
Get: function(o, now){
if(o.run){
var iStep = (o.target - now) / this.Step;
if(iStep){
this._finish = false;
if(Math.abs(iStep) < 1){ iStep = iStep > 0 ? 1 : -1; }
return now + iStep;
}
}
}
};
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]