雖然說把圖片放在網路上就要有被盜走的覺悟，不過若能加上浮水印的話，至少能起一點點的嚇阻效果。但要一張一張的修改可是會累死人的，因此筆者就想到改用類似浮水印的方式來達成同樣的功能。詳細的教學請參閱：用 jQuery 來做圖片偽浮水印
套件名稱：WaterImage
套件版本：1.0
作者網站：http://abgne.tw/jquery/jquery-plugins/waterimage-1-0.html
套件網址：N/A
發佈日期：2009-09-15
檔案大小：1.47 KB
檔案下載：jquery.watermark.js
參數說明：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | blank(選填) 描述： 空白的遮罩圖示 預設值： 'images/blank.gif' logo(選填) 描述： 要加上 Logo 版權宣告圖片位置；若不需要則保持空白 預設值： '' position(選填) 描述： Logo 版權宣告圖片的擺放位置 預設值： 'bottom right' prex(選填) 描述： 套用浮水印效果時 IMG 及 DIV 的 className 前綴 預設值： 'waterImage' zIndex(選填) 描述： 套用浮水印效果時 IMG 及 DIV 的 z-index 值 預設值： 10000 |
方法說明：
1 2 3 4 5 | // 幫指定的圖片加上浮水印的版權宣告效果 $(...).waterImage(options); // 修改預設的參數 $.waterImage.defaults = options; |
使用範例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.waterImage.js"></script> <style type="text/css"> .waterImage_img { border: 1px solid black; } </style> <script type="text/javascript"> $(window).load(function(){ $(".water").waterImage({ logo: 'logo.gif' }); }); </script> <body> <img src="jquery_animate_menu.gif" alt="用 jQuery 做選單 – 動畫賀聯式選單" class="water" /> <img src="htcmenu.gif" alt="用 jQuery 做選單 – 山寨版的 HTC 首頁選單" class="water" /> </body> |
範例瀏覽：
http://demonstration.abgne.tw/jquery/plugins/0073/0073.html
相關連結
推薦內容