使用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页面的代码略，效果如下：

转载于:https://www.cnblogs.com/demingblog/p/3255966.html