Tujuan dari contoh ini adalah untuk menunjukkan kepada Anda cara membuat efek suspensi mouse dari gambar skala abu -abu/warna menggunakan HTML5 dan jQuery. Sebelum HTML5 muncul, mencapai efek ini membutuhkan dua gambar, versi berwarna dan abu -abu. HTML5 sekarang membuat membuat efek ini lebih mudah dan lebih efisien, karena gambar abu -abu akan dihasilkan langsung dari file asli. Saya harap Anda akan menemukan skrip ini berguna dalam desain seperti lemari tampilan atau album foto.
Kode jQuery berikut akan mencari gambar target dan menghasilkan versi grayscale. Ketika mouse ditangguhkan pada gambar, kode secara bertahap akan mengubah gambar skala abu -abu menjadi berwarna.
- <mce: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text/javascript> </cce: script>
- <mce: scriptType = text/javascript> <!-
- //OnWindowLoad.ThiswaitSuntilimageshavelaveaded yang mana
- $ (window) .load (function () {
- // fadeinimagessothereis notacolorpopdocumentload dan kemudian con -windowload
- $ (. ItemImg) .fadein (500);
- // Cloneimage
- $ ('. ItemImg'). masing -masing (fungsi () {
- varel = $ (ini);
- el.css ({position: absolute}). wrap (<divlass = 'img_wrapper'style = display: inline-blockmce_style = display: inline-block>). clone (). addClass ('img_grayscale'). css ({position: absolute, z-index: 998, opacity: 0}). insertBefore (el) .queue (function () {
- varel = $ (ini);
- el.parent (). css ({lebar: this.width, tinggi: this.height});
- el.dequeue ();
- });
- this.src = grayscale (this.src);
- });
- // fadeimage
- $ ('. ItemImg'). MouseOver (function () {
- $ (ini) .parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1000);
- })
- $ ('. IMG_GRAYSCALE'). MouseOut (function () {
- $ (ini) .stop (). animate ({opacity: 0}, 1000);
- });
- });
- // GRAYSCALEWCANVASMETHOD
- functionGraysCale (src) {
- varcanvas = document.createElement ('Canvas');
- varctx = canvas.getContext ('2d');
- varimgobj = newImage ();
- imgobj.src = src;
- canvas.width = imgobj.width;
- canvas.height = imgobj.height;
- ctx.drawimage (imgobj, 0,0);
- varimgpixels = ctx.getImagedata (0,0, canvas.width, canvas.height);
- untuk (vary = 0; y <imgpixels.height; y ++) {
- untuk (varx = 0; x <imgpixels.width; x ++) {
- vari = (y*4)*imgpixels.width+x*4;
- varavg = (imgpixels.data [i]+imgpixels.data [i+1]+imgpixels.data [i+2])/3;
- imgpixels.data [i] = rata -rata;
- imgpixels.data [i+1] = rata -rata;
- imgpixels.data [i+2] = rata -rata;
- }
- }
- ctx.putImagedata (imgpixels, 0,0,0,0, imgpixels.width, imgpixels.height);
- returnCanvas.todataurl ();
- }
- //-> </mce: script>
Cara menggunakan * Kutipan jQuery.js
* Tempel kode di atas
* Atur gambar target (misalnya .Post-IMG, IMG, .gallery IMG, dll.)
* Anda dapat mengubah kecepatan animasi (misalnya, 1000 = 1 detik)
kesesuaian Dapat bekerja pada browser apa pun yang mendukung HTML5 dan JavaScript, seperti Chrome, Safari, dan Firefox. Jika browser tidak mendukung HTML5, efek ini akan kembali ke gambar warna asli. Catatan: Jika file lokal tidak berfungsi pada Firefox dan Chrome, Anda harus meletakkan kode HTML di server web.