<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
#idContainer{height:410px; width:510px; border:1px solid #000000; position:relative;}
.Fade{
position:absolute;
top:20px;
left:20px;
background:#fff;
border:5px solid #000099;
width:460px;
height:360px;
}
</style>
<script type="text/javascript">
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
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 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;//是否执行完成
this._fun = function(){};//渐变程序
this._opacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; } ;
this._targetH = 0;//目标高度
this._targetW = 0;//目标宽度
this._targetO = 0;//目标透明度
var _style = obj.currentStyle || document.defaultView.getComputedStyle(obj, null);
this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
this.SetOptions(options);
this.Mode = this.options.Mode;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.FadeOpacity = !!this.options.FadeOpacity;
this.minOpacity = parseInt(this.options.minOpacity);
this.maxOpacity = parseInt(this.options.maxOpacity);
this.FadeHeight = !!this.options.FadeHeight;
this.minHeight = parseInt(this.options.minHeight);
this.maxHeight = parseInt(this.options.maxHeight) || this._obj.offsetHeight - this._yBorder;
this.posHeight = Math.abs(this.options.posHeight);
this.FadeWidth = !!this.options.FadeWidth;
this.minWidth = parseInt(this.options.minWidth);
this.maxWidth = parseInt(this.options.maxWidth) || this._obj.offsetWidth - this._xBorder;
this.posWidth = Math.abs(this.options.posWidth);
this.Show = !!this.options.Show;
this.Opacity = 100;//透明度
//如果默认是关闭
if(!this.Show){ this.Opacity = 0; }
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step:10,//变化率
Time:10,//变化间隔
FadeOpacity:true,//是否透明渐变
minOpacity:0,//最小透明度
maxOpacity:100,//最大透明度
FadeHeight:true,//是否高度渐变
minHeight:0,//最小高度
maxHeight:0,//最大高度
posHeight:0,//变换高度位置
FadeWidth:true,//是否宽度渐变
minWidth:0,//最小宽度
maxWidth:0,//最大宽度
posWidth:0,//变换宽度位置
Mode:"both",//渐变顺序
Show:true//是否默认打开状态
};
Object.extend(this.options, options || {});
},
//触发
Start: function() {
clearTimeout(this._timer);
//取反表示要设置的状态
this.Show = !this.Show;
//根据状态设置目标值
if(this.Show){
this._targetH = this.maxHeight;
this._targetW = this.maxWidth;
this._targetO = this.maxOpacity;
} else{
this._targetH = this.minHeight;
this._targetW = this.minWidth;
this._targetO = this.minOpacity;
}
//设置渐变程序
switch (this.Mode.toLowerCase()) {
case "width" :
this._fun = function(){
this.SetWidth() && this.SetHeight();
//由于分了两步,透明度的步长变成两倍
this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2;
}
break;
case "height" :
this._fun = function(){
this.SetHeight() && this.SetWidth();
this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2;
}
break;
case "both" :
default :
this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); }
}
//获取变换点位置
if(this.posHeight){ this._y= this._obj.offsetTop + this._obj.offsetHeight * this.posHeight; }
if(this.posWidth){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.posWidth; }
this.Run();
},
//执行
Run: function() {
clearTimeout(this._timer);
this._finish = true;
//执行渐变
this._fun();
//未完成继续执行
if (!this._finish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); }
},
//设置高度渐变
SetHeight: function() {
if(this.FadeHeight){
var iHeight = this._obj.offsetHeight - this._yBorder, iStep = this.GetStep(this._targetH, iHeight);
if(iStep){
//如果有变换点设置
if(this.posHeight){ this._obj.style.top = this._y - this._obj.offsetHeight * this.posHeight + "px"; }
this._obj.style.height = (iHeight + iStep) + "px";
this._finish = false;
return false;
}
}
return true;
},
//设置宽度渐变
SetWidth: function() {
if(this.FadeWidth){
var iWidth = this._obj.offsetWidth - this._xBorder, iStep = this.GetStep(this._targetW, iWidth);
if(iStep){
//如果有变换点设置
if(this.posWidth){ this._obj.style.left = this._x - this._obj.offsetWidth * this.posWidth + "px"; }
this._obj.style.width = (iWidth + iStep) + "px";
this._finish = false;
return false;
}
}
return true;
},
//设置透明渐变
SetOpacity: function() {
if(this.FadeOpacity){
var iStep = this.GetStep(this._targetO, this.Opacity);
if(iStep){
this.Opacity += iStep;
//防止透明度出错
if(this.Opacity < 0){ this.Opacity = 0; } else if(this.Opacity > 100){ this.Opacity = 100; }
this._opacity(this.Opacity);
this._finish = false;
return false;
}
} else{ this._opacity(100); }
return true;
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
}
};
</script>
<input id="idBoth" type="button" value="同时伸缩" />
<input id="idMid" type="button" value="居中伸缩" />
<input id="idHeight" type="button" value="高度优先" />
<input id="idWidth" type="button" value="宽度优先" />
<div id="idContainer">
<div id="idFade" class="Fade"></div>
</div>
<input id="idOpacity" type="button" value="取消透明" />
<input id="idMin" type="button" value="设置最小范围" />
<input id="idWidthF" type="button" value="取消宽度变换" />
<input id="idHeightF" type="button" value="取消高度变换" />
<script type="text/javascript">
var f = new Fade("idFade");
$("idBoth").onclick = function(){
f.Mode = "both";
f.posWidth = f.posHeight = 0;
f.Start();
}
$("idMid").onclick = function(){
f.posWidth = f.posHeight = .5;
f.Start();
}
$("idHeight").onclick = function(){
f.Mode = "Height";
f.Start();
}
$("idWidth").onclick = function(){
f.Mode = "Width";
f.Start();
}
$("idOpacity").onclick = function(){
if(f.FadeOpacity){
f.FadeOpacity = false;
this.value = "设置透明";
} else {
f.FadeOpacity = true;
this.value = "取消透明";
}
}
$("idMin").onclick = function(){
if(f.minHeight){
f.minHeight = f.minWidth = 0;
this.value = "设置最小范围";
} else {
f.minHeight = f.minWidth = 100;
this.value = "取消最小范围";
}
}
$("idWidthF").onclick = function(){
if(!f.FadeWidth){
f.FadeWidth = true;
this.value = "取消宽度变换";
} else {
f.FadeWidth = false;
this.value = "设置宽度变换";
}
}
$("idHeightF").onclick = function(){
if(!f.FadeHeight){
f.FadeHeight = true;
this.value = "取消高度变换";
} else {
f.FadeHeight = false;
this.value = "设置高度变换";
}
}
function Event(e){
var oEvent = isIE ? window.event : e;
if (isIE) {
oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;
oEvent.stopPropagation = function(){ this.cancelBubble = true; };
}
return oEvent;
}
$("idFade").onclick = function(e){
if(f.Show){
e = Event(e);
e.stopPropagation();
var o=this, x=o.offsetLeft, y=o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; x += o.offsetLeft; y += o.offsetTop; }
f.posWidth = (e.pageX - x) / this.offsetWidth;
f.posHeight = (e.pageY - y) / this.offsetHeight;
f.Start();
}
}
$("idContainer").onclick = function(e){
if(!f.Show){ f.Start(); }
}
</script>
<div id="aa"></div>
</body>
</html>