Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Evento rotellina mouse
Forum - Javascript - Evento rotellina mouse

Avatar
andry89mm (Member)
Pro


Messaggi: 128
Iscritto: 21/12/2006

Segnala al moderatore
Postato alle 22:48
Venerdì, 18/05/2007
Salve a tutta la comunità ;
avrei bisogno di creare uno script che "senta" la rotellina del mouse(evento da collegare per esempio allo zoom di un'immagine).

Non sono ancora riuscito a trovare una soluzione.

Se avete suggerimenti fatevi avanti (con tutta calma, non ho fretta ):k:

Andrea

PM Quote
Avatar
gius (Ex-Member)
Expert


Messaggi: 294
Iscritto: 20/06/2007

Segnala al moderatore
Postato alle 21:45
Mercoledì, 05/12/2007
Prova questo
Codice sorgente - presumibilmente HTML

  1. <html>
  2.   <head><title>::: Scrolling testo :::</title>
  3.   </head>
  4. <body>
  5.     <div style="position:absolute;top:10px;left:10px;">
  6.   <div id="titolo">   <a href="javascript:window.close()">
  7.    <img src="chiudi.gif" width="12" height="12" alt="chiudi" border="0" align="right"></a>:: Titolo ::  </div>
  8.   <div id="clip">
  9.         <div id="scroll">  Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile...  </div>
  10.   </div>
  11.   <div style="position:absolute;top:20px;left:182px;width:16;">
  12.      <a href="#"><img src="su.gif" width="16" heght="16" alt="freccia su" border="0"></a>
  13.   </div>
  14.   <div style="position:absolute;top:118px;left:182px;width:16;">
  15.    <a href="#"><img src="giu.gif" width="16" heght="16" alt="freccia giu" border="0"></a>
  16.   </div>
  17.   </div>
  18.   </body>
  19. </html>
  20. <style type="text/css">
  21.   body {   font: bold 9pt Verdana,Arial;   color:#660000;  }
  22.   #titolo {   font: bold 8pt Verdana,Arial;   color:#ffffff; background-color:#990000;   padding:2px; position:absolute;top:0px;left:0px;   width:200px;height:15px;  }
  23.   #scroll {   font: 8pt Verdana,Arial;    color:#660000; padding:3px;   position:absolute; top:5px;   left:5px; width:180;  }
  24.   #clip {   border: solid 1px #660000;   position:absolute;top:16px;left:0px;   width:200px;height:120px;   clip:rect(0 200 120 0); padding:5px;  }
  25.   a,a:visited {color :#ffffff; text-decoration:none}
  26.   </style>
  27. <script type="text/javascript">
  28.      var delta=0;    // spostamento
  29.      var inizio=5;   // posizione iniziale del testo in pixel
  30.      var fine=-130   // posizione finale del testo
  31.      var attesa=50;  // millisecondi di attesa
  32.     var pos=inizio; // variabile corrente che memorizza la posizione
  33.   </script>
  34. <script type="text/javascript" src="codice.js"></script>
  35.  
  36.  
  37. Vediamo il contenuto del file "codice.js"
  38.  
  39. function muovi() {
  40.     if (((pos==fine)&&(delta==-1))||((pos==inizio)&&(delta==1))) delta=0;
  41.    pos=pos+delta;
  42.     document.getElementById('scroll').style.top=pos;
  43.     if (delta!=0) setTimeout('muovi()',50);
  44.   }



Per il pulsante che permette di far salire il testo mettiamo all'interno del collegamento:
onmouseover="delta=-1;
muovi();"
al passaggio del mouse imposta la variabile dello spostamento delta=-1 e attiva la funzione muovi;

onmouseout="delta=0;"
al passaggio del mouse imposta la variabile dello spostamento delta=0.

Analogamente per il pulsante che permette di far scendere il testo che imposta la variabile dello spostamento delta=1

Ultima modifica effettuata da gius il 05/12/2007 alle 21:47
PM Quote