WordPress博客网站给网页添加全屏水印教程 附代码

很多时候有些网站需要防止被盗用,或是一些信息标注,需要开启防盗防水印,下边代码直接复制到通用js中,或如果后台有自定义JS代码的地方 直接加进去即可。


000.png


code

  1. <script>
  2.     $(document).ready(function() {
  3.        var watermark_txt = "源码UI源码网" + getDate();
  4.        watermark({"watermarl_element":"watermark-wrapper", "watermark_txt":watermark_txt});
  5.     });
  6.     function watermark(settings) {
  7.         //默认设置
  8.         var defaultSettings={
  9.             watermarl_element:"body",
  10.             watermark_txt:"",
  11.             watermark_x:10,//水印起始位置x轴坐标
  12.             watermark_y:10,//水印起始位置Y轴坐标
  13.             watermark_rows:2000,//水印行数
  14.             watermark_cols:2000,//水印列数
  15.             watermark_x_space:50,//水印x轴间隔
  16.             watermark_y_space:50,//水印y轴间隔
  17.             watermark_color:'#d7d7d7',//水印字体颜色
  18.             watermark_alpha:0.3,//水印透明度
  19.             watermark_fontsize:'15px',//水印字体大小
  20.             watermark_font:'思源黑体',//水印字体
  21.             watermark_width:500,//水印宽度
  22.             watermark_height:50,//水印长度
  23.             watermark_angle:15//水印倾斜度数
  24.         };
  25.         //采用配置项替换默认值,作用类似jquery.extend
  26.         if(arguments.length===1&&typeof arguments[0] ==="object" ) {
  27.             var src=arguments[0]||{};
  28.             for(key in src) {
  29.                 if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]){
  30.                     continue;
  31.                 } else if(src[key]){
  32.                     defaultSettings[key]=src[key];
  33.                 }
  34.             }
  35.         }
  36.         var oTemp = document.createDocumentFragment();
  37.         var maskElement=document.getElementById(defaultSettings.watermarl_element) || document.body;
  38.         //获取页面最大宽度
  39.         var page_width = Math.max(maskElement.scrollWidth,maskElement.clientWidth);
  40.         //获取页面最大高度
  41.         var page_height = Math.max(maskElement.scrollHeight,maskElement.clientHeight,maskElement.scrollTop);
  42.         //水印数量自适应元素区域尺寸
  43.         defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
  44.         defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
  45.         var x;
  46.         var y;
  47.         for (var i = 0; i < defaultSettings.watermark_rows; i++) {
  48.             y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
  49.             for (var j = 0; j < defaultSettings.watermark_cols; j++) {
  50.                 x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
  51.                 var mask_div = document.createElement('div');
  52.                 mask_div.id = 'mask_div' + i + j;
  53.                 mask_div.className = 'mask_div';
  54.                 //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
  55.                 mask_div.innerHTML=(defaultSettings.watermark_txt);
  56.                 //设置水印div倾斜显示
  57.                 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  58.                 mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  59.                 mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  60.                 mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  61.                 mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  62.                 mask_div.style.visibility = "";
  63.                 mask_div.style.position = "absolute";
  64.                 mask_div.style.left = x + 'px';
  65.                 mask_div.style.top = y + 'px';
  66.                 mask_div.style.overflow = "hidden";
  67.                 mask_div.style.zIndex = "1029"; // 9999
  68.                 // pointer-events:none  让水印不遮挡页面的点击事件
  69.                 mask_div.style.pointerEvents='none';
  70.                 // 设置边框
  71.                 // mask_div.style.border="solid #eee 1px";
  72.                 // 兼容IE9以下的透明度设置
  73.                 mask_div.style.filter="alpha(opacity=50)";
  74.                 mask_div.style.opacity = defaultSettings.watermark_alpha;
  75.                 mask_div.style.fontSize = defaultSettings.watermark_fontsize;
  76.                 mask_div.style.fontFamily = defaultSettings.watermark_font;
  77.                 mask_div.style.color = defaultSettings.watermark_color;
  78.                 mask_div.style.textAlign = "center";
  79.                 mask_div.style.width = defaultSettings.watermark_width + 'px';
  80.                 mask_div.style.height = defaultSettings.watermark_height + 'px';
  81.                 mask_div.style.display = "block";
  82.                 oTemp.appendChild(mask_div);
  83.             };
  84.         };
  85.         maskElement.appendChild(oTemp);
  86.     }
  87.     function getDate() {
  88.         var d = new Date();
  89.         var year = d.getFullYear() >= 10 ? d.getFullYear() : ('0'+d.getFullYear());
  90.         var month = d.getMonth()+1 >= 10 ? d.getMonth()+1 : ('0'+d.getMonth()+1);
  91.         var day = d.getDate() >= 10 ? d.getDate() : ('0'+d.getDate());
  92.         var hour = d.getHours() >= 10 ? d.getHours() : ('0'+d.getHours());
  93.         var minute = d.getMinutes() >= 10 ? d.getMinutes() : ('0'+d.getMinutes());
  94.         var second = d.getSeconds() >= 10 ? d.getSeconds() : ('0'+d.getSeconds());
  95.         return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
  96.     }
  97. </script>

下载说明:

1.本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。

2.如果源码下载地址失效请/联系站长QQ进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码源码ui网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容,购买即以为着您同意上述内容。

源码UI网 » WordPress博客网站给网页添加全屏水印教程 附代码

发表回复