jQuery模糊效果- blur.js

張貼者： 日期：
jquery blur effect
最近想要作以前flash的遮罩效果，在flash做很簡單，不過要在js內製作就不是那麼簡單就可以解決了，先找到這個外掛，不過跟我要的還是有落差，但用過也記錄一下，這是可以用jquery製作圖片模糊效果，加上可以使用jQuery UI的draggable來拖曳模糊範圍，也可以用來製作一些特效。

下載外掛：blur.js

使用外掛及一些設定。
view plaincopy to clipboardprint?
  1. $('.target').blurjs({    
  2.     source: 'body', //Background to blur    
  3.     radius: 5, //Blur Radius    
  4.     overlay: '', //Overlay Color, follow CSS3's rgba() syntax    
  5.     offset: { //Pixel offset of background-position    
  6.         x: 0, y: 0 },    
  7.     optClass: '', //Class to add to all affected elements    
  8.     cache: false, //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.    
  9.     cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object    
  10.     draggable: false //Only used if jQuery UI is present. Will change background-position to fixed    
  11. });  

blur.js Demo

留言

張貼留言