mootools 膨胀效果

!---->

Kwick

• Red
• Orange
• Yellow
• Green
• Blue
• Indigo
• Violet

!--<script src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script>--&gt; <!--<script src="a.js"></script>-->
<style>
#kwicks_container {
background-color: white;
height: 100px;
}
#kwicks {
position: relative;
}
#kwicks .kwick {
float: left;
display: block;
width: 117px;
height: 100px;
}
#kwick_red {background-color: red;}
#kwick_orange {background-color: orange;}
#kwick_yellow {background-color: yellow;}
#kwick_green {background-color: green;}
#kwick_blue {background-color: blue;}
#kwick_indigo {background-color: indigo; color: #fff; }
#kwick_violet {background-color: violet;}
</style>
<h3>Kwick</h3>
<div id="kwicks_container">
<ul id="kwicks">
    <li id="kwick_red" class="kwick">Red </li>
    <li id="kwick_orange" class="kwick">Orange </li>
    <li id="kwick_yellow" class="kwick">Yellow </li>
    <li id="kwick_green" class="kwick">Green </li>
    <li id="kwick_blue" class="kwick">Blue </li>
    <li id="kwick_indigo" class="kwick">Indigo </li>
    <li id="kwick_violet" class="kwick">Violet </li>
</ul>
<span class="clr"><!-- spanner --></span></div>
<script defer=defer>
Fx.Elements = new Class({
 Extends: Fx.CSS,
 initialize: function(elements, options){
  this.elements = this.subject = $$(elements);
  this.parent(options);
 },
 compute: function(from, to, delta){
  var now = {};
  for (var i in from){
   var iFrom = from[i], iTo = to[i], iNow = now[i] = {};
   for (var p in iFrom) iNow[p] = this.parent(iFrom[p], iTo[p], delta);
  }
  return now;
 },
 set: function(now){
  for (var i in now){
   var iNow = now[i];
   for (var p in iNow) this.render(this.elements[i], p, iNow[p], this.options.unit);
  }
  return this;
 },
 start: function(obj){
  if (!this.check(obj)) return this;
  var from = {}, to = {};
  for (var i in obj){
   var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {};
   for (var p in iProps){
    var parsed = this.prepare(this.elements[i], p, iProps[p]);
    iFrom[p] = parsed.from;
    iTo[p] = parsed.to;
   }
  }
  return this.parent(from, to);
 }
}); 
 
var szNormal = 117, szSmall  = 100, szFull   = 219;
 
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
 kwick.addEvent("mouseenter", function(event) {
  var o = {};
  o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
  kwicks.each(function(other, j) {
   if(i != j) {
    var w = other.getStyle("width").toInt();
    if(w != szSmall) o[j] = {width: [w, szSmall]};
   }
  });
  fx.start(o);
 });
});
 
$("kwicks").addEvent("mouseleave", function(event) {
 var o = {};
 kwicks.each(function(kwick, i) {
  o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
 });
 fx.start(o);
})
</script>