2023-07-04 00:05:02troyea2
網頁設計 用 jQuery 來做圖片偽浮水印
網頁設計
來自:
接著脫手寫程式之前,先來看一下筆者用來做偽浮水印的手法:
一樣是有一張 1px * 1px 的 blank.gif 圖片,我們需要把它的寬高設成跟原圖一樣,並把位置移到原圖上面。接著再產生一個 Div 區塊,一樣是寬高及位置都跟原圖一樣,但重點是它的 background-image 就是我們要用來當版權宣告的圖片,而圖片位置只要靠著 background-position 就可以控制了。
所以需要產生一個 Img 跟 Div 區塊,讓我們來看 jQuery 的部份:
檢視原始碼 JavaScript
若是有仔細注意的話,會發現筆者也把本來圖片 alt 屬性也加在我們的 blank.gif 上面,所以當瀏覽者把滑鼠移到 blank.gif 上也能泛起原圖的 alt 屬性的內容。沒問題的話,就讓我們來看結果囉~
上方的是沒加偽浮水印的圖片,而下方的則是加上浮水印及版權宣佈圖片(右下角)後的結果。列位瀏覽時能趁便把滑鼠移到圖片上面,或者是點著圖片按右鍵另存看抓到的是阿誰檔案。
記得筆者曾寫過一篇「用 JavaScript 來做偽浮水印」,那時是用 JavaScript 來寫的,得顛末計較才能把版權宣佈的圖片放在右下角。此刻筆者把整個結果用 jQuery 來改寫,並把本來要較量爭論的版權宣佈圖片位置換成 background-position 的體式格局來控制,如許想放那就只要設定一下就行了。
我們的 HTML 就是很純真的圖片罷了:
檢視原始碼 HTML
來自: