Sto cercando di raggiungere questo (90 gradi di rotazione), ma fallisce senza errori. Questa immagine si trova all'interno di un TAG <a></a> in cui è già attiva la funzione jquery.jquery ruota immagine onclick
<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>
consideri un'estensione jQuery come ad esempio: jQueryRotate
Ti farà la rotazione all'interno del onclick molto più facile e più leggibile.
Grazie, funziona. L'immagine ruota una sola volta: 'onclick = '$ (this) .rotate (180);'' –
È un commento o una domanda? – SMASH
era una domanda ... –
checkout questo: JqueryRotate
Questo ha piccole cose da fare, si può vedere ad esempio un codice nell'immagine stessa.
Quindi nel tuo caso si può fare questo:
$(document).ready(function(){
$('img[src^="down_arrow"]').click(function(){
$(this).rotate(90);
});
});
Perché il mio codice funziona solo una volta? 'onclick = '$ (questo).ruotare (180); " L'immagine viene ruotata, ma se faccio di nuovo clic, esegui il comando –
@ ArtPlanteur Probabilmente perché sei già ruotato di 180 gradi. – MiniRagnarok
come vorresti salvare l'immagine ruotata? – Mightee
A seconda di quale versioni del browser è necessario supportare, si potrebbe provare TRANFORMS CSS.
In primo luogo, definire una classe CSS come questo:
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
}
E quindi è possibile utilizzare jQuery per aggiungere la classe quando si fa clic sul link:
<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />
Non ci ho pensato, grazie. –
È semplicemente incredibile quanto si può ottenere quando si sa semplicemente quando aggiungere una classe o un id a un elemento tramite jquery – blackhawk
Funzionerà solo una volta? –
utilizzare una combinazione di regole CSS -webkit-transform e -moz-transform all'immagine click.Ad esempio per ruotare l'immagine di 90 gradi applicare seguendo le regole css al clic
$('img').click(function(){
$(this).css({
"-webkit-transform": "rotate(90deg)",
"-moz-transform": "rotate(90deg)",
"transform": "rotate(90deg)" /* For modern browsers(CSS3) */
});
});
Ciò consentirà di eseguire una rotazione aggiuntiva di ciascun clik
var gradi = 0; . $ ('img') clicca (funzione rotateMe (e) {
degrees += 90;
//$('.img').addClass('rotated'); // for one time rotation
$('.img').css({
'transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)'
});
Soluzione meravigliosa. Molto chiaro cosa fare seguendo il jsfiddle. Nel mio caso era esattamente ciò che il dottore ordinava. Un grande ringraziamento! – MZA
Questo è l'esempio per ruotare l'immagine 90deg come seguente codice sotto:
$(document).ready(function(){
$("img").click(function(){
$(this).rotate(90);
});
});
è necessario un plugin per la rotazione, lo sapevi bene? e non mostrarci il codice server, l'html generato è sufficiente. – mpm
Stai usando [this] (http://www.zachstronaut.com/posts/2009/08/07/ patch jquery-animate-css-rotate-scale.html) – bitWorking
No, ho pensato che fosse inclu ded in jquery: s lo verificherò, Grazie –