TShopping

 找回密碼
 註冊
搜索
查看: 674|回復: 0

[分享] 用 jQuery 來做圖片偽浮水印

  [複製鏈接]
發表於 2015-1-23 18:09:15 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 

記得筆者曾經寫過一篇「用 JavaScript 來做偽浮水印」,那時是用 JavaScript 來寫的,得經過計算才能把版權宣告的圖片放在右下角。現在筆者把整個效果用 jQuery 來改寫,並把原本要計算的版權宣告圖片位置換成 background-position 的方式來控制,這樣想放那就只要設定一下就好了。

我們的 HTML 就是很單純的圖片而已:

檢視原始碼 HTML

  1. <body>
  2.         <img src="jquery_animate_menu.gif" alt="用 jQuery 做選單 – 動畫賀聯式選單" class="water" />

  3.         <img src="htcmenu.gif" alt="用 jQuery 做選單 – 山寨版的 HTC 首頁選單" class="water" />
  4. </body>
複製代碼

接著動手寫程式之前,先來看一下筆者用來做偽浮水印的手法:

1.gif

一樣是有一張 1px * 1px 的 blank.gif 圖片,我們需要把它的寬高設成跟原圖一樣,並把位置移到原圖上面。接著再產生一個 Div 區塊,一樣是寬高及位置都跟原圖一樣,但重點是它的 background-image 就是我們要用來當版權宣告的圖片,而圖片位置只要靠著 background-position 就能控制了。

所以需要產生一個 Img 跟 Div 區塊,讓我們來看 jQuery 的部份:

檢視原始碼 JavaScript

  1. // 避免無法正確取得圖片的寬高
  2. // 因此動作延遲到 window.onload
  3. $(window).load(function(){
  4.         // 取得要加上偽浮水印圖片後來一一做設定
  5.         $(".water").each(function(i, ele){
  6.                 // 先把目前元素轉換成 jQuery 物件後記錄起來
  7.                 // 再取得本身圖片的寬高及 alt
  8.                 var _this = $(ele),
  9.                         _position = _this.position(),
  10.                         _height = _this.height(),
  11.                         _width = _this.width(),
  12.                         _alt = _this.attr('alt') || '';

  13.                 // 在 body 中插入一個寬高等於 _this 的 blank.gif 圖片
  14.                 // position 設成 absolute 後移動到 _this 的同位置
  15.                 $('<img />').css({
  16.                         position: 'absolute',
  17.                         zIndex: 10000,
  18.                         top: _position.top,
  19.                         left: _position.left
  20.                 }).attr({
  21.                         src: 'blank.gif',
  22.                         height: _height,
  23.                         width: _width,
  24.                         title: _alt
  25.                 }).appendTo('body');

  26.                 // 在 body 中插入一個寬高等於 _this 的 Div
  27.                 // position 設成 absolute 後移動到 _this 的同位置
  28.                 // 此 Div 的 background-image 就放我們想要放的 logo
  29.                 // 並可指定它的 background-position 位置
  30.                 $('<div />').css({
  31.                         height: _height,
  32.                         width: _width,
  33.                         position: 'absolute',
  34.                         zIndex: 9999,
  35.                         top: _position.top,
  36.                         left: _position.left,
  37.                         backgroundImage: 'url(logo.gif)',
  38.                         backgroundPosition: 'bottom right',
  39.                         backgroundRepeat: 'no-repeat'
  40.                 }).appendTo('body');
  41.         });
  42. });
複製代碼

如果有細心注意的話,會發現筆者也把原本圖片 alt 屬性也加在我們的 blank.gif 上面,所以當瀏覽者把滑鼠移到 blank.gif 上也能出現原圖的 alt 屬性的內容。沒問題的話,就讓我們來看效果囉~

2.gif

上方的是沒加偽浮水印的圖片,而下方的則是加上浮水印及版權宣告圖片(右下角)後的效果。各位瀏覽時能順便把滑鼠移到圖片上面,或者是點著圖片按右鍵另存看抓到的是那個檔案。

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 06:22 , Processed in 0.057405 second(s), 24 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表