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

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

檢視原始碼 HTML

1.jpg

 

 

  1. <body>
  2.         <img src="jquery_animate_menu.gif" alt="用 jQuery 做選單 – 動畫賀聯式選單" class="water" />
  3.  
  4.         <img src="htcmenu.gif" alt="用 jQuery 做選單 – 山寨版的 HTC 首頁選單" class="water" />
  5. </body>
複製代碼


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



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

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

檢視原始碼 JavaScript

  1.  
  2. // 避免無法正確取得圖片的寬高
  3. // 因此動作延遲到 window.onload
  4. $(window).load(function(){
  5.         // 取得要加上偽浮水印圖片後來一一做設定
  6.         $(".water").each(function(i, ele){
  7.                 // 先把目前元素轉換成 jQuery 物件後記錄起來
  8.                 // 再取得本身圖片的寬高及 alt
  9.                 var _this = $(ele),
  10.                         _position = _this.position(),
  11.                         _height = _this.height(),
  12.                         _width = _this.width(),
  13.                         _alt = _this.attr('alt') || '';
  14.  
  15.                 // 在 body 中插入一個寬高等於 _this 的 blank.gif 圖片
  16.                 // position 設成 absolute 後移動到 _this 的同位置
  17.                 $('<img />').css({
  18.                         position: 'absolute',
  19.                         zIndex: 10000,
  20.                         top: _position.top,
  21.                         left: _position.left
  22.                 }).attr({
  23.                         src: 'blank.gif',
  24.                         height: _height,
  25.                         width: _width,
  26.                         title: _alt
  27.                 }).appendTo('body');
  28.  
  29.                 // 在 body 中插入一個寬高等於 _this 的 Div
  30.                 // position 設成 absolute 後移動到 _this 的同位置
  31.                 // 此 Div 的 background-image 就放我們想要放的 logo
  32.                 // 並可指定它的 background-position 位置
  33.                 $('<div />').css({
  34.                         height: _height,
  35.                         width: _width,
  36.                         position: 'absolute',
  37.                         zIndex: 9999,
  38.                         top: _position.top,
  39.                         left: _position.left,
  40.                         backgroundImage: 'url(logo.gif)',
  41.                         backgroundPosition: 'bottom right',
  42.                         backgroundRepeat: 'no-repeat'
  43.                 }).appendTo('body');
  44.         });
  45. });
複製代碼


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


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

arrow
arrow

    NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()