الغرض من هذا المثال هو إظهار كيفية إنشاء تأثير تعليق الماوس لصورة رمادية/ملونة باستخدام HTML5 و JQuery. قبل ظهور HTML5 ، يتطلب تحقيق هذا التأثير صورتين ، نسخ ملونة وذات رمادي. يجعل HTML5 الآن إنشاء هذا التأثير أسهل وأكثر كفاءة ، حيث سيتم إنشاء الصور الرمادية مباشرة من الملف الأصلي. آمل أن تجد هذا البرنامج النصي مفيدًا في التصميمات مثل خزانات العرض أو ألبومات الصور.
سيبحث رمز jQuery التالي عن الصورة المستهدفة وإنشاء إصدار رمادي. عندما يتم تعليق الماوس على الصورة ، سيقوم الكود بتغيير الصورة الرمادية تدريجياً إلى اللون.
- <mce: scriptsrc = jquery.min.jsmce_src = jquery.min.jstype = text/javaScript> </mce: script>
- <mce: scriptType = text/javaScript> <!-
- //onwindowload
- $ (window) .Load (function () {
- // fadeinimagessothereis notacolorpopdocumentload و thenonwindowload
- $ (. itemImg) .fadein (500) ؛
- // cloneimage
- $ ('. itemImg'). كل (function () {
- varel = $ (هذا) ؛
- el.css ({الموضع: absolute}) clone (). addClass ('img_grayscale').
- varel = $ (هذا) ؛
- el.parent ().
- el.dequeue () ؛
- }) ؛
- this.src = grayscale (this.src) ؛
- }) ؛
- // fadeimage
- $ ('. itemImg'). mouseover (function () {
- $ (this) .parent (). find ('img: first'). stop ().
- })
- $ ('. img_grayscale'). mouseout (function () {
- $ (this) .stop (). ANIMATE ({عظمة: 0} ، 1000) ؛
- }) ؛
- }) ؛
- // grayscalewcanvasmichod
- وظيفة grayscale (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) ؛
- لـ (vary = 0 ؛ y <imgpixels.height ؛ y ++) {
- لـ (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] = avg ؛
- imgpixels.data [i+1] = avg ؛
- imgpixels.data [i+2] = avg ؛
- }
- }
- ctx.putimagedata (imgpixels ، 0،0،0،0 ، imgpixels.width ، imgpixels.height) ؛
- returncanvas.todataurl () ؛
- }
- //-> </mce: script>
كيفية استخدام * QUOTE JQUERY.JS
* لصق الرمز أعلاه
* اضبط الصورة المستهدفة (على سبيل المثال .post-IMG ، IMG ، .Gallery IMG ، إلخ)
* يمكنك تغيير سرعة الرسوم المتحركة (على سبيل المثال ، 1000 = 1 ثانية)
التوافق يمكن أن تعمل على أي متصفح يدعم HTML5 و JavaScript ، مثل Chrome و Safari و Firefox. إذا كان المتصفح لا يدعم HTML5 ، فسيعود هذا التأثير إلى صورة اللون الأصلية. ملاحظة: إذا كان الملف المحلي لا يعمل على Firefox و Chrome ، فيجب عليك وضع رمز HTML على خادم الويب.