Home » jQuery 應用

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

[ 日期： | 瀏覽：28,157 | 迴響：27 ]
範例 1
請協助我把這個效果加到我的網站 (只要 500 元)
沒錯!只要 500 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

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

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

檢視原始碼 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 就能控制了。

所以需要產生一個 Img 跟 Div 區塊，讓我們來看 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 2

    • 要繼承是可以的..一種是div外面再包一個超連結
      或者是幫產生出來的div加上click()事件來做連結的動作

  7. 已經學會了=D，感謝指導

    另外我想請問下
    可以讓js取得頁框組裡面的值並給予效果嗎?
    因為讓每頁都引用相同的js感覺有點吃力

    還有
    如果我現在要讓網頁中特定class有特定連結
    class A link to 1
    class B link to 2
    ...
    這種類似宣告的作法要怎麼樣才比較簡易?
    每個都寫成
    $('.A').click(function(){
    location.href = '1';});
    好像有點...

    • 你的 .A 是超連結會套用的嗎?還是..套用它的可能只是一個 DIV...之類的..
      如果只是 DIV 之類的需要它們能 click 時做某動作的話...這是一定要寫程式來設定的

  8. .A是一個圖檔
    我打算讓整個網站上千個圖檔點選下去之後都能連到該圖檔的說明頁面
    之所以會用js來寫，是因為我希望讓他自動偵測圖片
    達到連結的目的
    還是我使用.wrap來包覆會比較省資源?
    因為我現在光是定義100多個圖片檔就讓我js跑很慢了...
    又每個頁面都要引用，網站速度一整個下降很多Orz

  9. 我其實有想到一個解決方法
    因為網站本身是頁框組
    讓他在主頁面載入後(換言之第一次開啟主頁會很慢)
    偵測frame裡面的圖片並附上連結

    只是不知道有沒有辦法做到這樣XD"

  10. 我的寫法是
    在浮水印$('water'){...});之後
    連續式的宣告：
    $('.A').click(function(){location.href = '1.html';});
    $('.B').click(function(){location.href = '8.html';});
    $('.C').click(function(){location.href = '9.html';});
    $('.D').click(function(){location.href = '7.html';});
    ....

    因為class本身跟連結內容沒關係，所以沒辦法用變數來簡易宣告
    只能用這種方式嗎=x=
    還是能像我上面說的取得frame裡面的元素做處理

    • 取得 frame 內元再做處理是可以的..只要是同網域的話
      不過如果都沒加這幾個 click() 的話...就不會變慢嗎?

1 2

發表迴響