2013年4月22日 星期一

jquery 網頁黑白效果

black-white

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

Plugin下載
jQuery.BlackAndWhite

引入plugin後直接照範例使用就好了。
  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
  1. .bwWrapper {   
  2.     position:relative;   
  3.     display:block;   
  4. }  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...