使用js給頁面顯示的圖片添加水印效果

功能描述：使用Jquery 給頁面的圖片添加 版權信息水印。

              這里的水印並不是真的把每一張圖片上都添加了水印。而是在圖片的上方添加了一個層，層中包含了水印圖片效果就像是圖片上加了水印。

功能原理：1，使用jquery 遍歷頁面的所有img標簽，取得其位置信息
              2，在body里邊追加一個div，div中放水印圖片，根據1中取得的位置，來確定水印div的相對位置。

代碼：

$(function(){
             
                
                $("img").each(function(){
                    // 特殊情況--過濾掉無關的圖片
                    if($(this).attr("id") == "img1"){
                        return;
                    }
                    
                    
                    var top = $(this).offset().top+10;//這里數字根據需要調，一般配在數據庫中
                    var left = $(this).offset().left+10;
                    var styleString="width:250px;height:50px;display:block;position:absolute;left:"+left+"px;top:"+top+"px;";
                    var imageUrl="images/shuiyin.jpg";
                    //追加水印div
                    $(document.body).append('<div id="shuiyinDiv" style='+styleString+'><img src='+imageUrl+'></div>');
                });

這里還有很多屬性可以調，比如水印圖片的透明度等。

html頁面的代碼略，效果如下：