mzeffect.js

基于JSP的简单网上书店设计与实现（各模块完整齐全）

        var bottom =Math.ceil(halfH * schedule);
        obj.style.clip = "rect("+ (halfH-bottom) +"px "+
          op.originalOffsetWidth +"px "+ (halfH+bottom) +"px 0)";
        break;
      case "center-right-left":
      case "center-left-right":
        var halfW = Math.ceil(op.originalOffsetWidth /2);
        var right = Math.ceil(halfW * schedule);
        obj.style.clip = "rect(0 "+ (halfW+right) +"px "+
          op.originalOffsetHeight +"px "+ (halfW-right) +"px)";
        break;
      case "top":
      case "top-bottom":
        var bottom =op.originalOffsetHeight * schedule +"px";
        obj.style.clip="rect(0 "+ op.originalOffsetWidth +"px "+ bottom +" 0)";
        break;
      case "bottom":
      case "bottom-top":
        var top = op.originalOffsetHeight * (1 - schedule) +"px";
        obj.style.clip = "rect("+ top +" "+ op.originalOffsetWidth +"px "+
          op.originalOffsetHeight +"px 0)";
        break;
      case "left":
      case "left-right":
        var right = op.originalOffsetWidth  * schedule +"px";
        obj.style.clip="rect(0 "+ right +" "+ op.originalOffsetHeight +"px 0)";
        break;
      case "right":
      case "right-left":
        var left =op.originalOffsetWidth  * (1 - schedule) +"px";
        obj.style.clip = "rect(0 "+ op.originalOffsetWidth +"px "+
          op.originalOffsetHeight +"px "+ left +")";
        break;
      case "top-right":
      case "left-bottom":
        var right = op.originalOffsetWidth  * schedule +"px";
        var bottom =op.originalOffsetHeight * schedule +"px";
        obj.style.clip = "rect(0 "+ right +" "+ bottom +" 0)";
        break;
      case "top-left":
      case "right-bottom":
        var bottom = op.originalOffsetHeight * schedule +"px";
        var left =op.originalOffsetWidth  * (1 - schedule) +"px";
        obj.style.clip = "rect(0 "+ op.originalOffsetWidth +"px "+
          bottom +" "+ left +")";
        break;
      case "right-top":
      case "bottom-left":
        var top = op.originalOffsetHeight * (1 - schedule) +"px";
        var left =op.originalOffsetWidth  * (1 - schedule) +"px";
        obj.style.clip = "rect("+ top +" "+ op.originalOffsetWidth +"px "+
          op.originalOffsetHeight +"px "+ left +")";
        break;
      case "left-top":
      case "bottom-right":
        var top = op.originalOffsetHeight * (1 - schedule) +"px";
        var right=op.originalOffsetWidth  * schedule +"px";
        obj.style.clip = "rect("+ top  +" "+ right +" "+
          op.originalOffsetHeight +"px 0)";
        break;
    }
  };
};


//op{interval, duration, trend}
MzEffect.Combo=function(effects, element, op)
{
  this.effects=effects||[];
  if(this.effects.length==0) return;
  MzEffect.apply(this,[element,op]);
};
t=MzEffect.Combo.Extends(MzEffect, "MzEffect.Combo");
t.render=function(schedule)
{
  schedule = this.schedule || schedule;
  for(var i=0; i<this.effects.length; i++)
  {
    var e = this.effects[i];
    if (e.timer) clearTimeout(e.timer);
    e.render(schedule);
  }
};
t.finish=function()
{
  for(var i=0; i<this.effects.length; i++)
  {
    if(this.effects[i].finish) this.effects[i].finish();
    this.effects[i].dispose();
  }
};
t.dispose=function()
{
  for(var i=0; i<this.effects.length; i++) this.effects[i].dispose();
  MzEffect.prototype.dispose.call(this);
  delete this.effects;
};





/*--====== meizz effects ======--*/

MzEffect.Shake=function(element){MzEffect.call(this, element)};
MzEffect.Shake.Extends(MzEffect, "MzEffect.Shake").initialize=function()
{
  var me=this, obj=me.element, os=obj.style;
  var top =os.top, left=os.left, position=os.position;
  this.restore=function(){os.top=top; os.left=left; os.position=position;}

  this._process=function()
  {
    var a=[0, 0];
    if(me._scheduledIndex>=me._scheduledArray.length)
    {
      this._process=function()
      {
        me.restore();
        me.dispose();
        delete me._scheduledIndex;
        delete me._scheduledArray;
      };
    }
    else
    {
      a=me._scheduledArray[me._scheduledIndex];
      me._scheduledIndex++;
    }
    MzEffect.moveBy(obj, a[0], a[1],{
      duration: 40,
      interval: 20,
      onafterfinish: function(e){me._process();}});
  };
};
MzEffect.Shake.prototype._scheduledIndex=0;
MzEffect.Shake.prototype._scheduledArray=
[
   [20, -5]
  ,[-40,-5]
  ,[40, 10]
  ,[-40, 5]
  ,[40, -9]
  ,[-35, 8]
  ,[35, -7]
  ,[-30, 6]
  ,[20, -5]
  ,[-15, 4]
  ,[10, -3]
  ,[-8,  2]
  ,[6,  -1]
  ,[-5,  0]
  ,[3,   0]
  ,[-1,  0]
];


MzEffect.Appear=function(element, op)
{
  var e=MzElement.check(element);
  if(!e) return; if(System.ie 
    &&!e.style.width
    &&!e.style.height
    &&e.style.position!="absolute"
    &&e.currentStyle
    &&e.currentStyle.position!="absolute"
    &&e.currentStyle.width=="auto"
    &&e.currentStyle.height=="auto")
  { MzElement.show(e); return;}
  op=System.extend(
  {
    onbeforestart: function(e){MzElement.show(e.element);e.render(0.01);},
    onafterfinish: function(e){e.restore();}
  }, op||{});
  return MzEffect.opacity(element, op);
};

MzEffect.Fade=function(element, op)
{
  var e=MzElement.check(element);
  if(!e) return; if(System.ie 
    &&!e.style.width
    &&!e.style.height
    &&e.style.position!="absolute"
    &&e.currentStyle
    &&e.currentStyle.position!="absolute"
    &&e.currentStyle.width=="auto"
    &&e.currentStyle.height=="auto")
  { MzElement.hide(e); return;}
  op=System.extend(
  {
    trend: "weaken",
    onafterfinish: function(e){MzElement.hide(e.element); e.restore();}
  }, op||{});
  return MzEffect.opacity(element, op);
};


//op{loop, interval, dynamic}
MzEffect.Pulsate=function(element, op)
{
  this.element=MzElement.check(element); if(!this.element) return;
  op=this.options=System.extend({loop:5,interval:360,dynamic:true},op||{});
  if(!op.dynamic || op.loop<0 || op.loop>5) op.interval += 160;

  var a=this.attribName = "att_"+ this._className.replace(/\W/g, "_");
  if((t=this.element.getAttribute(a)) && (t=Instance(t))){
  System.extend(t.options, this.options); t.times=0; return t;}

  System.call(this);
  this.element.setAttribute(this.attribName, this.hashCode, 0);
  this.timer=null; this.initialize();
  if(op.onbeforestart) op.onbeforestart(this); this.render();
};
t=MzEffect.Pulsate.Extends(System, "MzEffect.Pulsate");

t.times=0;
t.status=true;
t.initialize=function()
{
  var me=this, op=me.options, obj=me.element;
  op.visibility=obj.style.visibility;

  this.render=function()
  {
    if(me.terminative) return me.stop();
    if(op.loop>-1 && me.times>=op.loop) return me.stop();
    if(me.status)
    {
      if(!op.dynamic || op.loop<0 || op.loop>5)
      {
        obj.style.visibility="hidden";
        me.timer = setTimeout(me.render, op.interval);
      }
      else
      {
        MzEffect.fade(obj, {
          interval: 40,
          duration: 160,
          onafterfinish: function(e)
          {
            obj.style.visibility="hidden";
            e.restore();
            me.timer = setTimeout(me.render, op.interval);
          }
        });
      }
    }
    else
    {
      if(!op.dynamic || op.loop<0 || op.loop>5)
      {
        obj.style.visibility="";
        me.timer = setTimeout(me.render, op.interval);
      }
      else
      {
        MzEffect.appear(obj,{
          interval: 40,
          duration: 160,
          onbeforestart: function(e){e.element.style.visibility=""; e.render(0.01);},
          onafterfinish: function(e){e.restore(); me.timer = setTimeout(me.render, op.interval);}
        });
      }
    }
    me.status = !me.status; if(me.status) me.times++;
  };

  this.stop=function()
  {
    obj.style.visibility=op.visibility;
    if(me.finish) me.finish();
    if(op.onafterfinish) op.onafterfinish(me);
    clearTimeout(me.timer);
    me.dispose();
  }
  this.dispose=function()
  {
    me.decontrol(); if(me.element)
    me.element.removeAttribute(me.attribName);
    delete me.state;
    delete me.timer;
    delete me.times;
    delete me.element;
    delete me.options;
  };
};
MzEffect.Pulsate.stop=function(element)
{
  if(element=MzElement.check(element))
  {
    var t = "att_"+ "MzEffect.Pulsate".replace(/\W/g, "_");
    if(t=element.getAttribute(t))if(t=Instance(t))t.terminative=true;
  }
}


//op{interval, duration}
MzEffect.BlindDown=function(element, op){MzEffect.apply(this, arguments);};
MzEffect.BlindDown.Extends(MzEffect, "MzEffect.Mask").initialize=function()
{
  var op=this.options, obj=this.element;
  op.height = obj.style.height;
  op.overflow = obj.style.overflow;
  op.visibility = obj.style.visibility;
  obj.style.visibility = "hidden";
  MzElement.show(obj);
  op.offsetHeight = obj.offsetHeight; if(!System.ie){
  var t; if(t=obj.style.paddingTop) t=parseFloat(t);
  if("number"==typeof t) op.offsetHeight -= t;
  var b; if(b=obj.style.paddingBottom) b=parseFloat(b);
  if("number"==typeof b) op.offsetHeight -= b;}
  obj.style.height = "1px"; obj.style.overflow = "hidden";
  setTimeout(function(){obj.style.visibility = op.visibility;}, 10);

  this.finish=this.restore=function()
  {
    obj.style.overflow = op.overflow;
    obj.style.height = op.height;
  };
  this.render=function(schedule)
  {
    schedule = this.schedule || schedule;
    obj.style.height = parseInt(schedule * op.offsetHeight) +"px";
  };
};

//op{interval, duration}
MzEffect.BlindUp=function(element, op)
{
  op = System.extend({trend: "weaken"}, op||{});
  MzEffect.apply(this, [element, op]);
};
MzEffect.BlindUp.Extends(MzEffect, "MzEffect.Mask").initialize=function()
{
  var op=this.options, obj=this.element;
  op.height = obj.style.height;
  op.overflow = obj.style.overflow;
  op.offsetHeight = obj.offsetHeight; if(!System.ie){
  var t; if(t=obj.style.paddingTop) t=parseFloat(t);
  if("number"==typeof t) op.offsetHeight -= t;
  var b; if(b=obj.style.paddingBottom) b=parseFloat(b);
  if("number"==typeof b) op.offsetHeight -= b;}
  obj.style.overflow = "hidden";

  this.finish=function()
  {
    MzElement.hide(obj);
    obj.style.overflow = op.overflow;
    obj.style.height = op.height;
  };
  this.restore=function()
  {
    obj.style.overflow = op.overflow;
    obj.style.height = op.height;
  };
  this.render=function(schedule)
  {
    schedule = this.schedule || schedule;
    if(schedule<=0.05) MzElement.hide(obj);
    obj.style.height = parseInt(schedule * op.offsetHeight) +"px";
  };
};

//op{interval, duration}
MzEffect.SlideUp=function(element, op)
{
  return MzEffect.collapse(element, System.extend(
  {
    onafterupdate: function(e){e.element.scrollTop=e.options.offsetHeight;}
  }, op||{}))
};

//op{interval, duration}
MzEffect.SlideDown=function(element, op)
{
  return MzEffect.expand(element, System.extend(
  {
    onafterupdate: function(e){e.element.scrollTop=e.options.offsetHeight;}
  }, op||{}))
};

//op{interval, duration}
MzEffect.Fall=function(){MzEffect.Curtain.apply(this, arguments);};
MzEffect.Fall.Extends(MzEffect.Curtain).initialize=function()
{
  MzEffect.Curtain.prototype.initialize.call(this);
  var me=this, op=me.options, obj=me.element;

  this.finish=function(){this.hide(9);};
  this.hide=function(n)
  {
    if(n<0){MzElement.hide(obj); me.restore(); return;}
    obj.style.height = "1px"; obj.style.visibility = "hidden";
    obj.style.marginTop=(n/10)*op.originalOffsetHeight + parseFloat(op.originalMarginTop||0) +"px";
    this.timer=setTimeout(function(){me.hide(--n);}, 10);
  }
  this.render=function(schedule)
  {
    schedule = Math.ceil(op.originalOffsetHeight * (this.schedule || schedule));
    obj.style.marginTop = (schedule + parseFloat(op.originalMarginTop||0)) +"px";
    obj.style.height= (op.originalOffsetHeight - schedule) +"px";
  };
};

//op{interval, duration}
MzEffect.Rise=function(){MzEffect.Curtain.apply(this, arguments);};
MzEffect.Rise.Extends(MzEffect.Curtain).initialize=function()
{
  MzEffect.Curtain.prototype.initialize.call(this);
  var me=this, op=me.options, obj=me.element;

  obj.style.height="1px"; MzElement.show(obj);
  op.originalOffsetHeight = obj.offsetHeight;
  obj.style.marginTop = op.originalOffsetHeight + parseFloat(op.originalMarginTop||0);

  this.render=function(schedule)
  {
    schedule = Math.ceil(op.originalOffsetHeight * (this.schedule || schedule));
    obj.style.height = schedule +"px";
    obj.style.marginTop = (op.originalOffsetHeight - schedule + parseFloat(op.originalMarginTop||0)) +"px";
  };
};





//[static method]
MzEffect.opacity  =function(element, op){return new MzEffect.Opacity(element, op);};
MzEffect.moveBy   =function(element, op){return new MzEffect.MoveBy(element, op);};
MzEffect.moveTo   =function(element, op){return new MzEffect.MoveTo(element, op);};
MzEffect.highlight=function(element, op){return new MzEffect.Highlight(element, op);};
MzEffect.mask     =function(element, op){return new MzEffect.Mask(element, op);};

MzEffect.combo    =function(element, op){};
MzEffect.shake    =function(element, op){return new MzEffect.Shake(element, op);};
MzEffect.appear   =function(element, op){return new MzEffect.Appear(element, op);};
MzEffect.fade     =function(element, op){return new MzEffect.Fade(element, op);};
MzEffect.pulsate  =function(element, op){return new MzEffect.Pulsate(element, op);};
MzEffect.expand   =function(element, op){return new MzEffect.BlindDown(element, op);};
MzEffect.collapse =function(element, op){return new MzEffect.BlindUp(element, op);};
MzEffect.remove   =function(element, op){return new MzEffect.Fade(element, System.extend(op||{}, {onafterfinish: function(){MzElement.remove(element)}}));};