Hilfe zu Laufband/Ticker mit Banner
Hallo liebe Gemeinde,
ich habe im großen weiten Internet ein mootols-script gefunden was ich erfolgreich Einsätze. Nun möchte aber der Kunde den Effekt etwas anders haben.
Zu sehen ist es auf http://chemnitz-mitte.de unterhalb des großen Panoramas sind alle "Partner" aufgeführt. Der derzeitige Effekt gefällt nicht ganz. Besser wäre es wen alle Partnerlogos wie eine Art "Newsticker" langsam durchlaufen.
Folgende Script nutze ich:
Code:
/*
Built For: MooTools 1.2.0
*/
var cmPartnerTicker = new Class({
Implements: [Options],
options: {
ticker_ul: 'newsticker', //element for the ticker
duration:200, //duration for the animation
delay:5000, //delay per news item
transition: Fx.Transitions.Quad.easeIn, //transition
direction:'vertical' //horzontal or vertical
},
initialize: function(el,options) {
//set options
this.setOptions(options);
this.el = $(el);
this.items = this.el.getElements('li');
var w = 0;
var h = 0;
var self = this;
if(this.options.direction == 'vertical'){
w = this.el.getWidth();
this.items.each(function(li,index) {
h += li.getSize().y;
});
}else if(this.options.direction == 'horizontal'){
h = this.el.getWidth();
this.items.each(function(li,index) {
w += li.getSize().x;
});
}else{
alert('no direction defined!');
}
this.el.setStyles({
position: 'absolute',
top: 0,
left: 0,
width: w,
height: h
});
this.fx = new Fx.Morph(this.el, {
transition: this.options.transition,
duration: this.options.duration,
onComplete: function(){
var i = (this.current==0)?this.items.length:this.current;
this.items[i-1].injectInside(this.el);
this.el.setStyles({
left:0,
top:0
});
}.bind(this)
});
this.current = 0;
(function(){
self.next();
}).delay(this.options.delay);
},
next: function(){
this.current++;
if (this.current >= this.items.length) this.current = 0;
var pos = this.items[this.current];
this.fx.start({
top: -pos.offsetTop,
left: -pos.offsetLeft
});
mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
},
pause: function(){
$clear(mytimer);
mytimer = null;
},
resume: function(){
if (mytimer == null) {
this.next();
}
}
});
var mytimer = null;
window.addEvent('domready', function() {
var partner = new cmPartnerTicker('mod_banner_content',{speed:5,delay:2000,direction:'horizontal'});
});
Was muss geändert werden damit der gewünschte "Ticker" Effekt erreicht wird.
Dazu muss ich sagen das ich in punkto JavaScript nicht die Erfahrung habe und somit euch um Hilfe bete.
Ich weiß auch nicht ob ich eine falsche Fx Funktion nutze oder eine andere sinnvoller wäre.
Vielen Dank im Voraus
Grüße STeaB
