it's black , it's white, whoo~,之前有分享過一篇 用 jQuery 幫圖片加上黑白效果的文章,不過因為是使用 Canvas 的關係,所以在舊版瀏覽器上就無法支援。
不過現在 BlackAndWhite 會判斷若舊版 IE 瀏覽器的話,就改用濾鏡的方式來達到同樣的功能,同時透過設定還能產生不同的彩色變黑白或是黑白變彩色的效果咧!
套件名稱:BlackAndWhite
套件網址:0.2.7
作者網站:http://gianlucaguarini.github.io/jQuery.BlackAndWhite/
套件網址:N/A
發佈日期:2013-07-10
檔案大小:2.84 KB
檔案下載:jquery.BlackAndWhite.min.js
參數選項說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | hoverEffect(選填) 描述: 是否啟用 hover 效果 預設值: true webworkerPath(選填) 描述: 指定實做 Web Worker 的 BnWWorker.js 位置(不包含 .js) 預設值: false responsive(選填) 描述: 是否當 window 發生 resize orientationchange 時重新計算圖片尺寸 預設值: true invertHoverEffect(選填) 描述: 是否反轉整個效果(預設是黑->彩色) 預設值: false speed(選填) 描述: hover 時的動畫速度;可分別自訂 {fadeIn: 500, fadeOut: 500} 預設值: 500 onImageReady(選填) 描述: 當圖片載入後要執行的函式 預設值: null |
方法說明:
檢視原始碼 JavaScript
1 2 | // 將指定區塊中的圖片加上 BlackAndWhite 效果 $(selector).BlackAndWhite(options); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.BlackAndWhite.min.js"></script> <style type="text/css"> .bwWrapper { position: relative; display: inline-block; } </style> <script type="text/javascript"> // 當網頁內容載完時 $(window).load(function(){ // 將 .bwWrapper 套上 BlackAndWhite 效果 // 預設是顯示黑白圖片, 當滑鼠移入時變成彩色 $('.bwWrapper').BlackAndWhite({ hoverEffect : true, invertHoverEffect: false, speed: { fadeIn: 200, fadeOut: 800 } }); }); </script> <body> <a href="#" class="bwWrapper"> <img src="img/dsc_0952.jpg"> </a> </body> |
感謝大大的分享 不過這功能如果在IE9上 放入超過4張圖片就會出問題說..
抱歉大大 是我手殘用法錯誤了 不能在個人電腦直接開啟 放到伺服器上開啟就沒問題了
請問可以控制它在一張圖片黑白畫面的範圍嗎
像是我要把一張圖的一半有這種效果