Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Effetto su menu

  1. #1

    Effetto su menu

    Salve a tutti.
    Sto cercando di realizzare un menù verticale con un semplicissimo effetto, cioè uno scorrimento a dx dei link quando passa il mouse.
    ecco il codice:

    <html>
    <head><title></title>
    <style type="text/css">
    ul#sidebar {width:180px;
    float:left;
    margin:0 0 10px 0;
    padding:0;
    list-style-type:none;
    background:#f00;}

    ul#sidebar li {display:inline;}

    ul#sidebar li a {line-height:30px;
    display:block;
    padding-left:5px;
    border:1px solid #000;
    border-width:0 1px 1px 0;}
    </style>
    <script>
    <!--
    var p=new Array();
    window.onload=function() {
    s_cont=document.getElementById("sidebar");
    s_item=s_cont.getElementsByTagName("a");
    for (i=0;i<s_item.length;i++) {p[i]=5;}
    }
    function slide_d(i) {
    if(p[i]<10) {p[i]++;} else {clearInterval(fx_d);}
    s_item[i].style.paddingLeft=p[i]+"px";
    }
    function slide_s(i) {
    if(p[i]>5) {p[i]--;} else {clearInterval(fx_s);}
    s_item[i].style.paddingLeft=p[i]+"px";
    }
    -->
    </script>
    </head>
    <body>
    <ul id="sidebar">
    <?php
    $sidebar=array("aaa"=>"Prova","bbb"=>"Prova","ccc" =>"Prova");
    $i=0;
    foreach ($sidebar as $k=>$v) {
    echo "[*]<a href=\"".$_SERVER["PHP_SELF"]."?view=".$k."\" ";
    echo "onMouseOver=\"fx_d=setInterval('slide_d(".$i.")', 20)\" ";
    echo "onMouseOut=\"fx_s=setInterval('slide_s(".$i.")',2 0)\" ";
    echo ">".$v."</a>\n";
    $i++;
    }
    ?>[/list]
    </body>
    </html>

    L'effetto funziona, ma se il mouse passa velocemente sui link impazzisce tutto... c'è una soluzione?

    firma in costruzione

  2. #2
    si, devi definire fx_d e fx_s come var della window (fuori dalla funzione) poi, prima di lanciare il setInterval per la funzione chiami il clearinterval sulla variabile corrispondente all'altra funzione.

  3. #3
    ti ringrazio per la risposta
    Però con i javascript non sono molto ferrato... potresti spiegarmelo in maniera un pò più semplice? (specie la questione delle var alla window...)
    firma in costruzione

  4. #4
    Allora, lo scope di un oggetto o variabile di JS è la posizione in cui quella variabile o oggetto è accessibile soltanto chiamandola.
    Se definisci:

    <script type="text/javascript">
    var variabile;
    </script>

    Questa varibile viene salvata come proprietà dell'elemento window della pagina. Quindi, potrai accedervi in qualunque punto chiamando window.variabile (o semplicemente variabile, dato che window è l'apice di tutte le istanze di Javascript (non so neanche se si dice così...) ).

    Se definisci invece:

    <script type="text/javascript">
    function myFunct()
    {
    var variabile;
    }
    </script>

    Quella variabile sarà usabile solo nella funzione myFunct, si dice che lo scope della variabile è myFunct, per cui chiamandola da fuori la funzione, ritornerà un errore.

    Quello che devi fare è definire fx_d e fx_s come variabili della window (con scope window) cioè scrivere:

    var fx_d, fx_s;

    fuori dalle funzioni, allo stesso livello in cui definisci p

  5. #5
    Ok sei stato chiarissimo
    Ti ringrazio moltissimo per l'aiuto!
    firma in costruzione

  6. #6
    Ho provato la tua modifica ma il problema rimane.....
    firma in costruzione

  7. #7
    Si, scusa, non avevo letto bene il codice...

    Il problema è che fevi settare un fx_d ed un fx_s per ogni elemento della lista.

    Prova, questo io l'ho testato, purtroppo non funziona benissimo.... Ti converrebbe usare una libreria Js con effetti già pronti (jQuery, Mootools, Scriptaculous)
    Codice PHP:
    <html>
    <head><title></title>
    <style type="text/css">
    ul#sidebar {width:180px;
    float:left;
    margin:0 0 10px 0;
    padding:0;
    list-style-type:none;
    background:#f00;}

    ul#sidebar li {display:inline;}

    ul#sidebar li a {line-height:30px;
    display:block;
    padding-left:5px;
    border:1px solid #000;
    border-width:0 1px 1px 0;}
    </style>
    <script>
    <!--

    var p=new Array();
    window.onload=function() {
    s_cont=document.getElementById("sidebar");
    s_item=s_cont.getElementsByTagName("a");
    for (i=0;i<s_item.length;i++) {p[i]=5;}
    }
    function slide_d(i) {
    if(p[i]<10) {p[i]++;} else {
        eval("clearInterval(fx_d"+i+")");
        }
    s_item[i].style.paddingLeft=p[i]+"px";
    }
    function slide_s(i) {
    if(p[i]>5) {p[i]--;} else {eval("clearInterval(fx_s"+i+")");}
    s_item[i].style.paddingLeft=p[i]+"px";
    }
    -->
    </script>
    </head>
    <body>
    <ul id="sidebar">
    <?php
    $sidebar
    =array("aaa"=>"Prova","bbb"=>"Prova","ccc"=>"Prova");
    $i=0;
    foreach (
    $sidebar as $k=>$v) {
    echo 
    "[*]<a href=\"".$_SERVER["PHP_SELF"]."?view=".$k."\" ";
    echo 
    "onMouseOver=\"fx_d$i=setInterval('slide_d(".$i.")',20)\" ";
    echo 
    "onMouseOut=\"fx_s$i=setInterval('slide_s(".$i.")',20)\" ";
    echo 
    ">".$v."</a>\n";
    $i++;
    }
    ?>[/list]
    </body>
    </html>

  8. #8
    Avevo provato una cosa simile ed affettivamente nn è proprio perfetto... vabbè ti ringrazio comunqua per la pazienza e l'impegno

    firma in costruzione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.