Hoy Dani, me pasa este enlace en el que podemos ver una versión de Coverflow desarrollada en MooTools. Además de su ligero peso me ha sorprendido la sensación de fluidez que he percibido desde Firefox (no he probado con otro Explorador).
Código
//Javascript
var CoverFlow = new Class({
options: {
container: 'CF',
slider: {"slider":"slider","knob":"knob"},
caption: 'captions',
reflection: 0.5,
startIndex: 0,
useMouseWheel: true
},
initialize: function(options){
this.setOptions(options)
this.cur = 0;
this.tar = 0;
this.curI = 0;
this.oW = $(this.options.container).offsetWidth;
this.sz = this.oW * 0.5;
this.init();
this.checker = this.check.periodical(100, this);
},
check: function(){
//console.log("this.tar:"+this.tar+" this.cur:"+this.cur)
switch (this.tar < this.cur-1 || this.tar > this.cur+1)
{
case true:
this.moveTo(this.cur + (this.tar-this.cur)/3);
default:
//$clear(this.checker);
break;
}
},
init: function(){
$$(this.options.images).each(function(image, i){
image.setStyle("display","block");
image.addEvent('click', this.glideTo.bind(this,[i]));
}, this);
this.sli = new Slider($(this.options.slider.slider), $(this.options.slider.knob),{
steps: this.options.images.length-1,
}).set(this.options.startIndex);
this.sli.addEvent('onChange', this.glideTo.bind(this));
if(this.options.useMouseWheel)
document.addEvent('mousewheel', this.scoll.bind(this));
$(this.options.container).setStyle("height", this.oW*0.33);
$(this.options.container).setStyle("visibility","visible");
this.moveTo(this.options.startIndex*-150);
this.glideTo(this.options.startIndex);
},
scoll: function(e){
var d = e.wheel;
if(d > 0 && this.curI > 0)
this.curI--;this.glideTo(this.curI);
if(d < 0 && this.curI < this.options.images.length-1)
this.curI++;this.glideTo(this.curI);
},
glideTo: function(i){
$(this.options.caption).set('html', this.options.images[i].alt);
this.curI = i;
this.tar = i*-150;
this.sli.set(i);
},
moveTo: function(x){
x = Math.round(x);
this.cur = x;
var zI = this.options.images.length;
$$(this.options.images).each(function(img){
var z = Math.sqrt(10000 + x * x) + 100;
var xs = x / z * this.sz + this.sz;
var imgH = img.height;
var imgW = img.width;
var percent = 100;
if ((imgW + 1) > (imgW / (this.options.reflection + 1))){
percent = 115;
}
var newL = xs - (percent / 2) / z * this.sz;
var newH = (imgH / imgW * percent) / z * this.sz;
var newT = (this.oW * 0.33 - newH) + ((newH / (this.options.reflection + 1)) * this.options.reflection);
img.setStyle("left", newL);
img.setStyle("height", newH);
img.setStyle("top", newT);
img.setStyle("zIndex", x < 0 ? zI++ : zI--);
x += 150;
}, this);
}
});
CoverFlow.implement(new Options, new Events);
window.addEvent('load', function(){
new CoverFlow({
images: $$("#CF img"),
caption: $('captions')
});
});
//HTML
<div id="CF">
<img class="cfImg" src="img/refl_img001.png" alt="First Image" />
<img class="cfImg" src="img/refl_img002.png" alt="Second Image" />
<img class="cfImg" src="img/refl_img003.png" alt="Image" />
<img class="cfImg" src="img/refl_img001.png" alt="Image" />
<img class="cfImg" src="img/refl_img002.png" alt="Image" />
<img class="cfImg" src="img/refl_img003.png" alt="Image" />
<img class="cfImg" src="img/refl_img001.png" alt="Image" />
<img class="cfImg" src="img/refl_img002.png" alt="Image" />
<img class="cfImg" src="img/refl_img003.png" alt="Image" />
<img class="cfImg" src="img/refl_img001.png" alt="Image" />
<img class="cfImg" src="img/refl_img002.png" alt="Image" />
<img class="cfImg" src="img/refl_img003.png" alt="Image" />
</div>
Si alguien se anima, me gustaría verlo con imagenes reales.
se me olvido comertal lo que hace:
15 comentarios, 5 referencias
+
#