記得筆者曾經寫過一篇「用 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> |
接著動手寫程式之前,先來看一下筆者用來做偽浮水印的手法:
一樣是有一張 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 屬性的內容。沒問題的話,就讓我們來看效果囉~
上方的是沒加偽浮水印的圖片,而下方的則是加上浮水印及版權宣告圖片(右下角)後的效果。各位瀏覽時能順便把滑鼠移到圖片上面,或者是點著圖片按右鍵另存看抓到的是那個檔案。
去測試之後的結果是這樣
firebug也告訴我就是那個js檔拖速度
然後把那串刪掉就沒事了=x=
大概是要宣告的圖檔太多吧
那如果我把js嵌入在主網站
然後取得frame內元再做處理呢?
要怎麼取得frame內元素阿=x="
我改天再弄個存取 frame 內的元素範例..
不過你是否能試著改成..假設你那些 .a, .b 都還有其它相同 .class 的話..
會在這篇發這樣的問題不是沒有理由XD"
因為我是利用浮水印的概念去做的
我把那張blank圖檔的class設為底圖的src
然後再把blank附加上一個連結,讓他看起來像是點底圖的連結
所以之前才會問那些取得底圖連結之類的問題=x=
換句話說,完全沒有相同這樣XD"
頂多是沿用$(")的設定=x="
現在先直接宣告好了
等之後有frame教學的時候再修=x=a
慢也只是慢1s就能讀取全部的圖檔
好在我圖片不大...
如果可以的話..把 html 寄給我看看...
其實程式的寫法也會影響到效能
老師救命啊~~
http://www.hodong.com.tw/demo/unitrend/product_list.html
瀏覽器視窗一縮小就跑掉了~~怎麼辦?
你需要在網頁 resize 時, 重新計算套用才行
男丁格爾老師:
以前在您的網站只要google的帳號登錄,就可以進行會員下載一些範例檔。不過不知道為何最近都無法下載呢?就算登錄了還是一樣=.=
暫時停用會員功能, 下載的部份也先全面開放...
男丁格爾老師謝謝你!!
放上後可以順利疊上另一張圖,但圖片上會顯示一張裂開的圖式,就是沒讀到檔案的警告圖,請問大概會是什麼樣的原因?