Foggy

Foggy 是一种模糊的页面元素的jQuery插件，
它支持IE（8），火狐，Safari和Chrome浏览器。

在这里，无论是段落文本和图像的背景已经模糊的雾。

The foggy demonstration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa viverra diam pharetra quis dictum mauris bibendum. In eget tortor id risus suscipit facilisis. Duis luctus tortor non sem mollis sodales. Cras et cursus justo. Phasellus vel libero erat, vel mattis justo. Aenean tempor bibendum euismod. Vivamus erat justo, lacinia vitae facilisis quis, luctus sed mauris. Suspendisse lectus dolor, accumsan eu lacinia in, dapibus vitae nunc.

sample image

Usage

Sensible defaults 
 $('.your-selector').foggy();
Customization
 $('.your-selector').foggy({
   blurRadius: 2,          
   opacity: 0.8,           
   cssFilterSupport: true  
 });
Disabling
 $('.your-selector').foggy(false);

Download

Version 1.1 jquery.foggy.min.js 2012-09-15
Version 1.02 jquery.foggy.min.js 2012-09-03

它是如何工作的

 

Foggy默认使用 “-webkit的过滤器：模糊”CSS属性

If the browser doesn't support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.

这是一个例子强制手动模式下，打开它在您的网页检查器来查看详细信息。

The foggy demo, manual mode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa viverra diam pharetra quis dictum mauris bibendum. In eget tortor id risus suscipit facilisis. Duis luctus tortor non sem mollis sodales. Cras et cursus justo. Phasellus vel libero erat, vel mattis justo. Aenean tempor bibendum euismod. Vivamus erat.

Sample image