jquery 網頁黑白效果

今天因為看到有人在討論中國大陸網站為了弔念川震死傷的人，很多網站都變成黑白，才知道有這麼一個方便的jquery plugin可以直接把頁面變成黑白的。

Plugin下載
jQuery.BlackAndWhite

引入plugin後直接照範例使用就好了。

view plaincopy to clipboardprint

1. $(window).load(function(){   
2.     $('.bwWrapper').BlackAndWhite({   
3.         hoverEffect : true, // default true   
4.         // set the path to BnWWorker.js for a superfast implementation   
5.         webworkerPath : false,   
6.         // for the images with a fluid width and height    
7.         responsive:true,   
8.         // to invert the hover effect   
9.         invertHoverEffect: false,   
10.         speed: { //this property could also be just speed: value for both fadeIn and fadeOut   
11.             fadeIn: 200, // 200ms for fadeIn animations   
12.             fadeOut: 800 // 800ms for fadeOut animations   
13.         }   
14.     });   
15. });  

注意他的寫法，要使用的元素要把position設為relative

view plaincopy to clipboardprint

1. .bwWrapper {   
2.     position:relative;   
3.     display:block;   
4. }  

Demo