Pages

0

JQuery 圖片模糊遮罩 plugin


點選上面這張圖片就可以看到效果~

這也是在 flash 中很常見到的效果，
同樣的利用 jquery 來呈現，
滑鼠在圖片上按住 0.5 秒後，原圖就會出現，
再壓住 0.5 秒後又會回復模糊的圖片，
比較特別的是你可以自己使用自己做的模糊圖片，
或是使用程式幫你產生模擬的模糊圖片，
若是使用自己做的模糊圖片，
換成別張圖，就會變成兩張圖片的遮罩效果，或放大鏡效果~
套用其實很簡單，
做一個 div 當作你要產生效果的區域，
在 div 標籤中加入以下屬性：
img01 圖檔位置
img01Width 圖檔寬度
img01Height 圖檔高度
img02 模糊圖檔位置(可省略)
img02Width 模糊圖檔寬度(可省略)
img02Height 模糊圖檔高度(可省略)

img02是模糊的圖檔，
不寫的話就自動由程式產生模糊圖檔~
除了邊框和背景要從 plugin 中設定，
其於 div 屬性就自由從 css 中設定即可~

oxxo_imageBlurMask_v1.js 下載 (右鍵下載)

設定檔：
blurEffect : 6,                   // 模糊程度 ( img02不存在時 )
blurOpacity : 0.3,                // 模糊圖片透明度
maskRadius : 60,                  // 圓形遮罩半徑
maskBorderWidth : 5,              // 圓形遮罩 border 寬度
maskBorderStyle : "solid",        // 圓形遮罩 border 樣式
maskBorderColor : "#000",         // 圓形遮罩 border 顏色
maskShadow : "2px 2px 10px #000", // 圓形遮罩陰影
borderWidth : 5,                  // 背景 border 寬度
borderStyle : "solid",            // 背景 border 樣式
borderColor : "#000",             // 背景 border 顏色
bgColor : "#000",                 // 背景顏色
time : 500                        // 滑鼠按住不放的時間

html參考原始碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery oxxo-imageBlurMask v1 plugin</title>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_imageBlurMask_v1.js"></script>
   <script>
    $(function(){
     $("#test1").imageBlurMask({
      blurEffect : 6,                   // 模糊程度 ( img02不存在時 )
      blurOpacity : 0.3,                // 模糊圖片透明度
      maskRadius : 60,                  // 圓形遮罩半徑
      maskBorderWidth : 5,              // 圓形遮罩 border 寬度
      maskBorderStyle : "solid",        // 圓形遮罩 border 樣式
      maskBorderColor : "#000",         // 圓形遮罩 border 顏色
      maskShadow : "2px 2px 10px #000", // 圓形遮罩陰影
      borderWidth : 5,                  // 背景 border 寬度
      borderStyle : "solid",            // 背景 border 樣式
      borderColor : "#000",             // 背景 border 顏色
      bgColor : "#000",                 // 背景顏色
      time : 500                       // 滑鼠按住不放的時間
     });
    });
   </script>
</head>
<body>
   <div id="test1" img01="img/20120712.jpg" img01Width="396" img01height="280" img02="img/20120712_2.jpg" img02Width="396" img02Height="280"></div>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言