JavaScript: Ruotare immagini con jQuery
Link sponsorizzati
Navigando in rete ho trovato un interessante plugin per jQuery. Il plugin in questione è jquery rotate. Con tale script è possibile ruotare immagini in modo semplice, solamente con un paio di funzioni.
La pagina html che fa il lavoro è questa
Link sponsorizzati
<head>
<title>Example</title>
<script type="text/javascript" src="jquery.js"></script><!-- jquery -->
<script type="text/javascript" src="jquery.rotate.js"></script><!-- plugin per la rotazione -->
<script type="text/javascript">
function rotate(angolo, direzione)
{
if(direzione == "sinistra")
$('#image').rotateLeft(parseInt(angolo));
else
$('#image').rotateRight(parseInt(angolo));
}
</script>
</head>
<body>
<p style="text-align:center;">
<img src="foto.gif" id="image" />
<form name="f">
Gradi: <input type="text" name="angolo" />
Direzione: <select name="direzione">
<option value="destra">Destra</option>
<option value="sinistra">Sinistra</option>
</select>
<input type="button" value="Ruota" onclick="rotate(document.f.angolo.value, document.f.direzione.value); return false;" />
</form>
</p>
</body>
</html>
La pagina è costituita da un semplice logo (ho preso quello di google) e un box nel quale inserire i gradi di rotazione per l’immagine e la direzione nella quale spostarlo.
La parte che ci interessa è praticamente soltanto questa:
{
if(direzione == "sinistra")
$('#image').rotateLeft(parseInt(angolo));
else
$('#image').rotateRight(parseInt(angolo));
}
Le funzioni rotateLeft e rotateRight sono fornite dal plugin in questione, con un’altra funzione generica, rotate. Può essere usata quest’ultima, o le due che ho usato io, il risultato è medesimo (sulla pagina della documentazione ci sono alcuni esempi).
Se volete potete scaricare l’intero esempio.
Link sponsorizzati
