Voglio rendere un'immagine più scura se si passa sopra il mouse. È possibile modificare la tonalità, la saturazione o la gamma di una img con JQuery (o Javascript)?JQuery cambia tonalità, saturazione, gamma di <img>?
risposta
Hai provato la libreria PaintbrushJS o Pixastic?
Non è possibile farlo utilizzando solo JavaScript (poiché non può manipolare file binari), tuttavia è possibile farlo con l'elemento HTML5 <canvas>
per aiutare.
Take a look here, ci sono alcune librerie là fuori per aiutare.
Se si desidera solo a svanire esso, modificare l'opacità al passaggio del mouse, ad esempio:
$("img").css({ opacity: 0.5 }).hover(function() {
$(this).animate({ opacity: 1 });
}, function() {
$(this).animate({ opacity: 0.5 });
});
Visualizza e nascondere un semi-trasparente nero <div>
sopra la parte superiore dell'immagine.
Estendendo il suggerimento di Marcelo, potresti avere una copia della tua immagine nella fase finale più scura, metterla sopra l'originale e variare la sua opacità al passaggio del mouse come ha detto Nick. Questo metodo ti consente di fare qualsiasi cosa con la transizione dell'immagine: cambiare tonalità, saturazione, ecc. Un semplice codice di animazione dissolvenza Javascript può essere trovato here.
Si può fare questo in CSS
IMG:hover
{
-ilter: brightness(0.7);
-webkit-filter: brightness(0.7);
-moz-filter: brightness(0.7);
-o-filter: brightness(0.7);
-ms-filter: brightness(0.7);
}
C'è un mucchio di altri filtri come sfocatura, saturare, contrasto, ...
È possibile easely utilizzare jQuery per cambiare il CSS, se si desidera.
Ho messo insieme questo prototipo che utilizza una soluzione cross-browser, solo CSS per animare la saturazione delle immagini su hover. C'è un sacco di modi per farlo in JS/jQuery ma hey, perché non farlo in CSS?
img[class*="filter-resat"] {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+
filter: gray; // For IE 6+
-webkit-filter: grayscale(100%); // for Chrome & Safari
// Now we set the opacity
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE
filter: alpha(opacity=40); // Chrome + Safari
-moz-opacity: 0.6; // Firefox
-khtml-opacity: 0.6; // Safari pre-webkit
opacity: 0.6; // Modern
// Now we set up the transition
-webkit-transition: all 1.0s ease;
-webkit-backface-visibility: hidden;
}
img[class*="filter-resat"]:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
// You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;}
Ciò richiede molti più upvotes. Questo è fantastico! – helgatheviking
Grazie! Non penso che sia una risposta valida perché non è JQuery. –
Perché utilizzare uno script se è possibile ottenere lo stesso effetto con i CSS? Comunque, lo sto usando ora e ho pompato che ho trovato questo. Avrei cambiato di nuovo se potessi. :) – helgatheviking
- 1. MENO: tonalità, saturazione e leggerezza - come usare?
- 2. Come posso modificare tonalità, luminosità e saturazione di UIColor?
- 3. Esiste una funzione per convertire UIColor in Tonalità luminosità saturazione?
- 4. Cambia colore tonalità della tastiera per UITextField
- 5. JQuery ricerca nella gamma di oggetti
- 6. Nel modello RGB quante tonalità sono disponibili?
- 7. Cambia immagine png bianca su un colore specifico
- 8. Java Cambia Saturation Of Image
- 9. Modifica tonalità di colore rgba
- 10. Compilatore C2 saturazione CPU all'avvio
- 11. jQuery cambia contenuto di colorbox
- 12. formula di correzione gamma:.^(Gamma) o.^(1/gamma)?
- 13. jquery cambia div text
- 14. jQuery cambia testo figlio
- 15. JQuery differito cambia "questo"
- 16. Jquery selezionare Cambia
- 17. rilevare se il colore è nella gamma
- 18. come impostare il contrasto e la saturazione usando fabric.js
- 19. Tonalità/dim. Selezionabile al tocco
- 20. Mappatura tonalità a lunghezza d'onda
- 21. Usando gamma <Index> con NSRange nell'API NSAttributedString
- 22. gamma di riempimento con zeri
- 23. rapida Gamma convertito <Int> a [Int]
- 24. Unslider JQuery Click Cambia Slide
- 25. jquery che cambia immagine src
- 26. asp.net mvc4 cambia jquery versione
- 27. cambia ordine div con jQuery
- 28. Cambia flash src con jquery?
- 29. cambia posizione di jQuery tooltip arrow
- 30. Cambia colore di sfondo con jQuery Mobile
Questo ha ancora il supporto molto povera. Attualmente IE e Firefox non lo supportano. Chrome, Safari e la maggior parte dei browser mobili fanno. –
Questo non è compatibile con i browser incrociati –