Listas enloquecidas usando script.aculo.us

Sólo un ejemplo de una lista que se mezcla cada vez que hacemos click en un item, utilizando las librerias prototype y script.aculo.us ¿Para qué puede servir? Ni idea.

<style>
  #scripty_morph_demo {
    background-color: #000;
    border: 4px solid #888;
    cursor: pointer;
    height: 300px;
    margin: 0 auto;
    outline: 1px solid #FFF;
    padding: 10px;
    position: relative;
    width: 200px;
  }
  #scripty_morph_demo div {
    color: #EEE;
    font-size: 60px;
    height: 60px;
    position: absolute;
  }
  #scripty_morph_demo div:hover {
    color: #E00;
  }
</style>

<script>
  Array.prototype.shuffle = function() { return this.sortBy(Math.random); };
  (function() {
    function foo() {
      $('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
        e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); 
      });
    }
    $('scripty_morph_demo').observe('click', foo);
    foo();
  })();
</script>

<div id="scripty_morph_demo">
  <div style="top: 0;"> uno </div>
  <div style="top: 60px;;"> dos </div>
  <div style="top: 120px;"> tres </div>
  <div style="top: 180px;"> cuatro </div>
  <div style="top: 240px"> cinco </div>
</div>

REFERENCIAS:madrobby.github.com