Salve a tutti vi propongo questo codice che ho scritto, perchè ho qualche problema.. sostanzialmente l'effetto è quello! ma purtroppo è lento e non fluido!
vorrei sapere se è un problema di codice, perchè ne avevo visti in giro di questi giochetti con i menu però al momento non mi vengono in mente.. e anche provando a cercarli non li ho trovati, non sapendo il tipo di effetto!
in ogni caso l'effetto è lento, molto spesso non prende gli spostamenti del mouse, e anche stando attenti passando lentamente con il mouse non vengono bene, o addiritura salta.
La mia domanda è questa guardando un po' in giro ho visto che ci sono diversi tipi di eventi sui movimenti del mouse: mouseenter, mouseover ho visto per il momento, ma per caso non c'è una lista di questi eventi con una tabella di paragone.. in modo da avere una scelta chiara.
Vi propongo il codice, se vi pare leggero oppure se si può sistemare in qualche modo.
Intanto ringrazio tutti coloro che risponderanno, ciau e buona giornata.
Codice PHP:<script language="javascript" type="text/javascript">
window.addEvent('load', function() {
var HLogther = $('highligther'); // Questo è il div che faccio scorrere
var ObjContainer = $$('.menu'); // Object contenitore
var ListaLI = $$('.menu ul li'); // Objects li
var StartMovement = 0;
var StartSize = 0;
var Mover = new Fx.Morph(HLogther, {duration: 'long', transition: 'elastic:out'}); // Setto l'effetto
ListaLI.each(function(el, i) { // Controllo ogni elemento (mi serve principalmente per il movimento iniziale)
if (el.hasClass('active')) { // se ha la classe active (che sarebbe magari la pagina attuale)
ListaLI.each(function(tel, j) { // sommo tutto le larghezze precedenti in modo da avere lo spostamento
if (j < i) { StartMovement += tel.getStyle('width').toInt(); }
});
StartSize = el.getStyle('width').toInt(); // prendo la larghezza attuale
}
el.addEvents({ // Aggiungo l'evento al li
'mouseenter': function() {
var movement = 0;
var size = 0;
ListaLI.each(function(tel, j) { // Stessa cosa di prima sommo le larghezze e prendo la dimensione
if (j < i) { movement += tel.getStyle('width').toInt(); }
if (j == i) { size = tel.getStyle('width').toInt(); }
});
alert(i);
//Mover.cacek();
Mover.start({ // Applico l'effetto
'margin-left': movement,
'width': size});
}
});
ObjContainer.addEvents({ // Per evitare un minimo sovrapposizione di eventi quando esce dall'ul ripristino il div alla sua posizione iniziale
'mouseleave': function() {
Mover.start({
'margin-left': StartMovement,
'width': StartSize});
}
});
});
Mover.start({ // Questo mi serve quando viene finita di caricare la pagina
'margin-left': StartMovement,
'width': StartSize});
});
</script>
<style>
* { margin:0; padding:0 }
.menu { background-color:#CC6699; height:37px;border-bottom:1px solid #742043; }
.menu div#highligther {height:5px; width:50px; background-color:#803353; margin-top:6px; }
.menu ul { list-style:none; }
.menu ul li { list-style:none; float:left; margin-top:3px; font-size:13px; font-weight: bold; color:#f8c9a3; height:20px; }
.menu ul li a, #wrapper .menu ul li a:visited { color:#f8c9a3; text-decoration:none; margin:0px 10px }
.menu ul li:hover { background-color:#990099; }
.menu ul li:hover a, #wrapper .menu ul li:hover a:visited { }
.menu ul li.active a, #wrapper .menu ul li.activer a:visited { text-decoration:underline; }
</style>
</head>
<body>
<div class="menu"><div id="highligther"></div><ul>
<li class="active" >[url="link0.php"]item0[/url]
[*][url="link1.php"]item1[/url]
[*][url="link2.php"]item2[/url]
[*][url="link3.php"]item3[/url]
[*][url="link4.php"]item4[/url]
[*][url="link5.php"]item5[/url]
[*][url="link6.php"]item6[/url]
[*][url="link7.php"]item7[/url]
[*][url="link8.php"]item8[/url][/list]</div>
</body>
Rispondi quotando