`
xinlingwuyu
  • 浏览: 136185 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript渐变效果

JavaScriptF#XHTMLCSSprototype 
阅读更多

<!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>

分享到：
| QQ窗口震动效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics