Tutorialdock | Free Web Resources

JQuery: calcolare la velocità del mouse

| di:

jquery questions indeas JQuery: calcolare la velocità del mouse

In questo tutorial vi spiegherò come calcolare la velocità del mouse, ad ogni spostamento così da utilizzare il valore ottenuto per diversi scopi.

Questo sistema può tornare utile per creare sfiziosi effetti speciali ma soprattutto per rendere più naturale l’esperienza dell’utente con una slider ad esempio: conoscendo la velocità del mouse, le si può far effettuare uno spostamento simile a quello che ormai siamo tutti abituati a vedere negli smartphones.

L’idea

Il trucco consiste nel trovare lo spazio percorso ogni volta che l’evento mousemove di JQuery viene “firato” (fired) e il tempo che ha impiegato per percorrerlo.

Il codice

Innanzitutto abbiamo bisogno di collegare JQuery, lo possiamo fare in molti modi, io personalmente preferisco inserire nell’head questo codice:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Poi nel body ci basta un p per mostrare la velocità del mouse, ma nella maggior parte dei casi non serve che venga visualizzato:

<p id="result"></p>

Questa è la parte più importante, da inserire all’interno del tag script:

//Definisco le variabili
var startX;
var pasttime;
var velocita;
//Imposto i valori iniziali quando la pagina è pronta
$(function(e){
var startX=e.pageX;
var pasttime= new Date();
});
//Ogni volta che viene mosso il mouse calcolo la velocità e la mostro in #result
$(document).mousemove(function(e){
curtime = new Date();
distance = (startX)-(e.pageX);
velocita=(Math.abs(Math.ceil(distance*75/(pasttime-curtime))));
$('#result').text(velocita);
startX = e.pageX;
pasttime = curtime;
});

Ora non vi resta che provare questo metodo e tirarne fuori tutti i difetti, sono sicuro che qualche bug c’è.

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente