问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

使用js给页面显示的图片添加水印效果

更新时间:2021-10-18 10:02 作者:逃离点击:

功能描述:使用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页面的代码略,效果如下:

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容