effects.js

ajax学习教程,方便大家加快学习速度,希望大家喜欢

// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
// Contributors:
//  Justin Palmer (http://encytemedia.com/)
//  Mark Pilgrim (http://diveintomark.org/)
//  Martin Bialasinki
// 
// See scriptaculous.js for full license.  

/* ------------- element ext -------------- */  
 
// converts rgb() and #xxx to #xxxxxx format,  
// returns self (or first argument) if not convertable  
String.prototype.parseColor = function() {  
  color = "#";  
  if(this.slice(0,4) == "rgb(") {  
    var cols = this.slice(4,this.length-1).split(',');  
    var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);  
  } else {  
    if(this.slice(0,1) == '#') {  
      if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();  
      if(this.length==7) color = this.toLowerCase();  
    }  
  }  
  return(color.length==7 ? color : (arguments[0] || this));  
}  

Element.collectTextNodesIgnoreClass = function(element, ignoreclass) {  
  var children = $(element).childNodes;  
  var text     = "";  
  var classtest = new RegExp("^([^ ]+ )*" + ignoreclass+ "( [^ ]+)*$","i");  
 
  for (var i = 0; i < children.length; i++) {  
    if(children[i].nodeType==3) {  
      text+=children[i].nodeValue;  
    } else {  
      if((!children[i].className.match(classtest)) && children[i].hasChildNodes())  
        text += Element.collectTextNodesIgnoreClass(children[i], ignoreclass);  
    }  
  }  
 
  return text;
}

Element.setContentZoom = function(element, percent) {  
  element = $(element);  
  element.style.fontSize = (percent/100) + "em";   
  if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);  
}

Element.getOpacity = function(element){  
  var opacity;  
  if (opacity = Element.getStyle(element, "opacity"))  
    return parseFloat(opacity);  
  if (opacity = (Element.getStyle(element, "filter") || '').match(/alpha\(opacity=(.*)\)/))  
    if(opacity[1]) return parseFloat(opacity[1]) / 100;  
  return 1.0;  
}

Element.setOpacity = function(element, value){  
  element= $(element);  
  var els = element.style;  
  if (value == 1){  
    els.opacity = '0.999999';  
    if(/MSIE/.test(navigator.userAgent))  
      els.filter = Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'');  
  } else {  
    if(value < 0.00001) value = 0;  
    els.opacity = value;  
    if(/MSIE/.test(navigator.userAgent))  
      els.filter = Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +  
        "alpha(opacity="+value*100+")";  
  }   
}  
 
Element.getInlineOpacity = function(element){  
  element= $(element);  
  var op;  
  op = element.style.opacity;  
  if (typeof op != "undefined" && op != "") return op;  
  return "";  
}  
 
Element.setInlineOpacity = function(element, value){  
  element= $(element);  
  var els = element.style;  
  els.opacity = value;  
}  
 
/*--------------------------------------------------------------------------*/  
 
Element.Class = {  
    // Element.toggleClass(element, className) toggles the class being on/off  
    // Element.toggleClass(element, className1, className2) toggles between both classes,  
    //   defaulting to className1 if neither exist  
    toggle: function(element, className) {  
      if(Element.Class.has(element, className)) {  
        Element.Class.remove(element, className);  
        if(arguments.length == 3) Element.Class.add(element, arguments[2]);  
      } else {  
        Element.Class.add(element, className);  
        if(arguments.length == 3) Element.Class.remove(element, arguments[2]);  
      }  
    },  
 
    // gets space-delimited classnames of an element as an array  
    get: function(element) {  
      return $(element).className.split(' ');  
    },  
 
    // functions adapted from original functions by Gavin Kistner  
    remove: function(element) {  
      element = $(element);  
      var removeClasses = arguments;  
      $R(1,arguments.length-1).each( function(index) {  
        element.className =  
          element.className.split(' ').reject(  
            function(klass) { return (klass == removeClasses[index]) } ).join(' ');  
      });  
    },  
 
    add: function(element) {  
      element = $(element);  
      for(var i = 1; i < arguments.length; i++) {  
        Element.Class.remove(element, arguments[i]);  
        element.className += (element.className.length > 0 ? ' ' : '') + arguments[i];  
      }  
    },  
 
    // returns true if all given classes exist in said element  
    has: function(element) {  
      element = $(element);  
      if(!element || !element.className) return false;  
      var regEx;  
      for(var i = 1; i < arguments.length; i++) {  
        if((typeof arguments[i] == 'object') &&  
          (arguments[i].constructor == Array)) {  
          for(var j = 0; j < arguments[i].length; j++) {  
            regEx = new RegExp("(^|\\s)" + arguments[i][j] + "(\\s|$)");  
            if(!regEx.test(element.className)) return false;  
          }  
        } else {  
          regEx = new RegExp("(^|\\s)" + arguments[i] + "(\\s|$)");  
          if(!regEx.test(element.className)) return false;  
        }  
      }  
      return true;  
    },  
 
    // expects arrays of strings and/or strings as optional paramters  
    // Element.Class.has_any(element, ['classA','classB','classC'], 'classD')  
    has_any: function(element) {  
      element = $(element);  
      if(!element || !element.className) return false;  
      var regEx;  
      for(var i = 1; i < arguments.length; i++) {  
        if((typeof arguments[i] == 'object') &&  
          (arguments[i].constructor == Array)) {  
          for(var j = 0; j < arguments[i].length; j++) {  
            regEx = new RegExp("(^|\\s)" + arguments[i][j] + "(\\s|$)");  
            if(regEx.test(element.className)) return true;  
          }  
        } else {  
          regEx = new RegExp("(^|\\s)" + arguments[i] + "(\\s|$)");  
          if(regEx.test(element.className)) return true;  
        }  
      }  
      return false;  
    },  
 
    childrenWith: function(element, className) {  
      var children = $(element).getElementsByTagName('*');  
      var elements = new Array();  
 
      for (var i = 0; i < children.length; i++)  
        if (Element.Class.has(children[i], className))  
          elements.push(children[i]);  
 
      return elements;  
    }  
}  
 
/*--------------------------------------------------------------------------*/

var Effect = {
  tagifyText: function(element) {
    var tagifyStyle = "position:relative";
    if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ";zoom:1";
    element = $(element);
    $A(element.childNodes).each( function(child) {
      if(child.nodeType==3) {
        child.nodeValue.toArray().each( function(character) {
          element.insertBefore(
            Builder.node('span',{style: tagifyStyle},
              character == " " ? String.fromCharCode(160) : character), 
              child);
        });
        Element.remove(child);
      }
    });
  },
  multiple: function(element, effect) {
    var elements;
    if(((typeof element == 'object') || 
        (typeof element == 'function')) && 
       (element.length))
      elements = element;
    else
      elements = $(element).childNodes;
      
    var options = Object.extend({
      speed: 0.1,
      delay: 0.0
    }, arguments[2] || {});
    var speed = options.speed;
    var delay = options.delay;

    $A(elements).each( function(element, index) {
      new effect(element, Object.extend(options, { delay: delay + index * speed }));
    });
  }
};

var Effect2 = Effect; // deprecated

/* ------------- transitions ------------- */

Effect.Transitions = {}

Effect.Transitions.linear = function(pos) {
  return pos;
}
Effect.Transitions.sinoidal = function(pos) {
  return (-Math.cos(pos*Math.PI)/2) + 0.5;
}
Effect.Transitions.reverse  = function(pos) {
  return 1-pos;
}
Effect.Transitions.flicker = function(pos) {
  return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
}
Effect.Transitions.wobble = function(pos) {
  return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
}
Effect.Transitions.pulse = function(pos) {
  return (Math.floor(pos*10) % 2 == 0 ? 
    (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
}
Effect.Transitions.none = function(pos) {
  return 0;
}
Effect.Transitions.full = function(pos) {
  return 1;
}

/* ------------- core effects ------------- */

Effect.Queue = {
  effects:  [],
  _each: function(iterator) {
    this.effects._each(iterator);
  },
  interval: null,
  add: function(effect) {
    var timestamp = new Date().getTime();
    
    switch(effect.options.queue) {
      case 'front':
        // move unstarted effects after this effect  
        this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
            e.startOn  += effect.finishOn;
            e.finishOn += effect.finishOn;
          });
        break;
      case 'end':
        // start effect after last queued effect has finished
        timestamp = this.effects.pluck('finishOn').max() || timestamp;
        break;
    }
    
    effect.startOn  += timestamp;
    effect.finishOn += timestamp;
    this.effects.push(effect);
    if(!this.interval) 
      this.interval = setInterval(this.loop.bind(this), 40);
  },
  remove: function(effect) {
    this.effects = this.effects.reject(function(e) { return e==effect });
    if(this.effects.length == 0) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },
  loop: function() {
    var timePos = new Date().getTime();
    this.effects.invoke('loop', timePos);
  }
}
Object.extend(Effect.Queue, Enumerable);

Effect.Base = function() {};
Effect.Base.prototype = {
  position: null,
  setOptions: function(options) {
    this.options = Object.extend({
      transition: Effect.Transitions.sinoidal,
      duration:   1.0,   // seconds
      fps:        25.0,  // max. 25fps due to Effect.Queue implementation
      sync:       false, // true for combining
      from:       0.0,
      to:         1.0,
      delay:      0.0,
      queue:      'parallel'
    }, options || {});
  },
  start: function(options) {
    this.setOptions(options || {});
    this.currentFrame = 0;
    this.state        = 'idle';
    this.startOn      = this.options.delay*1000;
    this.finishOn     = this.startOn + (this.options.duration*1000);
    this.event('beforeStart');
    if(!this.options.sync) Effect.Queue.add(this);
  },
  loop: function(timePos) {
    if(timePos >= this.startOn) {
      if(timePos >= this.finishOn) {
        this.render(1.0);
        this.cancel();
        this.event('beforeFinish');
        if(this.finish) this.finish(); 
        this.event('afterFinish');