Home » jQuery 應用

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

範例 1
沒錯!只要 500 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

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

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

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

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

jquery_fake_water_image_1

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

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

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

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

jquery_fake_water_image_2

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

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

27 筆針對 [jQ]用 jQuery 來做圖片偽浮水印 的迴響

  1. 去測試之後的結果是這樣
    firebug也告訴我就是那個js檔拖速度
    然後把那串刪掉就沒事了=x=
    大概是要宣告的圖檔太多吧

    那如果我把js嵌入在主網站
    然後取得frame內元再做處理呢?
    要怎麼取得frame內元素阿=x="

    • 我改天再弄個存取 frame 內的元素範例..
      不過你是否能試著改成..假設你那些 .a, .b 都還有其它相同 .class 的話..

      檢視原始碼 JavaScript
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      
      $(function(){
      	$('.xxxxxx').each(function(){
      		var $this = $(this),
      			_class = $this.attr('className');
       
      		$this.click(function(){
      			if(_class.indexOf('a')>-1){
      				location.href = 'http://tw.yahoo.com';
      			}else if(_class.indexOf('b')>-1){
      				location.href = 'http://www.google.com';
      			}
      		});
      	});
      });
  2. 會在這篇發這樣的問題不是沒有理由XD"
    因為我是利用浮水印的概念去做的
    我把那張blank圖檔的class設為底圖的src
    然後再把blank附加上一個連結,讓他看起來像是點底圖的連結
    所以之前才會問那些取得底圖連結之類的問題=x=

    換句話說,完全沒有相同這樣XD"
    頂多是沿用$(")的設定=x="

    現在先直接宣告好了
    等之後有frame教學的時候再修=x=a
    慢也只是慢1s就能讀取全部的圖檔
    好在我圖片不大...

  3. 男丁格爾老師:
    以前在您的網站只要google的帳號登錄,就可以進行會員下載一些範例檔。不過不知道為何最近都無法下載呢?就算登錄了還是一樣=.=

  4. 放上後可以順利疊上另一張圖,但圖片上會顯示一張裂開的圖式,就是沒讀到檔案的警告圖,請問大概會是什麼樣的原因?

發表迴響