html中实现添加水印的功能

1、使用背景图添加水印

2、使用定位添加水印

3、使用js添加可配置控制水印

CSS:

[css] view plain copy
  1. body{background-color#eef1f8;}  
  2. #one{padding10px 15px;background-color#FFFFFF;background-imageurl(http://pic.58pic.com/58pic/12/28/02/05J58PICUwy.jpg);background-repeatno-repeat;background-size50%;background-positioncenter;opacity: 0.9;}  
  3. #two{padding10px 15px;background-color#FFFFFF;margin-top10px;positionrelative;}  
  4. #three{padding10px 15px;background-color#FFFFFF;margin-top10px;}  
  5. #two-bg{positionabsolute;top:0;right:0;left:0;z-index0;width200px;height200px;}  
  6. #two-bg img{width100%;}  

HTML

[html] view plain copy
  1. <!--使用背景图添加水印-->  
  2. <div id="one">  
  3.      <p>这是一段文字</p>  
  4.     <ul>  
  5. <span style="white-space:pre">  </span> <li>这是第1个</li>  
  6.         <li>这是第2个</li>  
  7.         <li>这是第3个</li>  
  8.         <li>这是第4个</li>  
  9.         <li>这是第5个</li>  
  10.     </ul>  
  11. </div>  
  12. <!--使用定位添加水印-->  
  13. <div id="two">  
  14.     <p>这是一大段文字照着找着做做做做做做做做做做做做做做做</p>  
  15.     <ul>  
  16.         <li>这是第1个</li>  
  17.         <li>这是第2个</li>  
  18.         <li>这是第3个</li>  
  19.         <li>这是第4个</li>  
  20.         <li>这是第5个</li>  
  21.     </ul>  
  22. <span style="white-space:pre">  </span><!--图片透明 png格式的图片-->  
  23. <span style="white-space:pre">  </span><div id="two-bg"><img src="img/search.png"/></div>  
  24. </div>  
  25. <!---->  
  26. <div id="three">  
  27.     <p>看看看看扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</p>  
  28.     <ul>  
  29. <span style="white-space:pre">  </span> <li>这是第1个</li>  
  30.         <li>这是第2个</li>  
  31.         <li>这是第3个</li>  
  32.         <li>这是第4个</li>  
  33.         <li>这是第5个</li>  
  34.     </ul>  
  35. </div>  

JavaScript

[javascript] view plain copy
  1. watermark({ watermark_txt: "测试水印" })//传入动态水印内容  
  2.     function watermark(settings) {  
  3.     //默认设置  
  4.     var defaultSettings={  
  5.         watermark_txt:"text",  
  6.         watermark_x:100,//水印起始位置x轴坐标  
  7.         watermark_y:20,//水印起始位置Y轴坐标  
  8.         watermark_rows:20,//水印行数  
  9.         watermark_cols:20,//水印列数  
  10.         watermark_x_space:100,//水印x轴间隔  
  11.         watermark_y_space:50,//水印y轴间隔  
  12.         watermark_color:'#000000',//水印字体颜色  
  13.         watermark_alpha:0.3,//水印透明度  
  14.         watermark_fontsize:'18px',//水印字体大小  
  15.         watermark_font:'微软雅黑',//水印字体  
  16.         watermark_width:120,//水印宽度  
  17.         watermark_height:80,//水印长度  
  18.         watermark_angle:15//水印倾斜度数  
  19.     };  
  20.     //采用配置项替换默认值,作用类似jquery.extend  
  21.     if(arguments.length===1&&typeof arguments[0] ==="object" )  
  22.     {  
  23.         var src=arguments[0]||{};  
  24.         for(key in src)  
  25.         {  
  26.             if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])  
  27.                 continue;  
  28.             else if(src[key])  
  29.                 defaultSettings[key]=src[key];  
  30.         }  
  31.     }  
  32.   
  33.     var oTemp = document.createDocumentFragment();  
  34.   
  35.     //获取页面最大宽度  
  36.     var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);  
  37.     //获取页面最大长度  
  38.     var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);  
  39.   
  40.     //如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔  
  41.     if (defaultSettings.watermark_cols == 0 ||  
  42.        (parseInt(defaultSettings.watermark_x   
  43.     + defaultSettings.watermark_width *defaultSettings.watermark_cols   
  44.     + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))   
  45.     > page_width)) {  
  46.         defaultSettings.watermark_cols =   
  47.       parseInt((page_width  
  48.           -defaultSettings.watermark_x  
  49.           +defaultSettings.watermark_x_space)   
  50.           / (defaultSettings.watermark_width   
  51.           + defaultSettings.watermark_x_space));  
  52.         defaultSettings.watermark_x_space =   
  53.       parseInt((page_width   
  54.           - defaultSettings.watermark_x   
  55.           - defaultSettings.watermark_width   
  56.           * defaultSettings.watermark_cols)   
  57.           / (defaultSettings.watermark_cols - 1));  
  58.     }  
  59.     //如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔  
  60.     if (defaultSettings.watermark_rows == 0 ||  
  61.        (parseInt(defaultSettings.watermark_y   
  62.     + defaultSettings.watermark_height * defaultSettings.watermark_rows   
  63.     + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1))   
  64.     > page_height)) {  
  65.         defaultSettings.watermark_rows =   
  66.       parseInt((defaultSettings.watermark_y_space   
  67.            + page_height - defaultSettings.watermark_y)   
  68.            / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));  
  69.         defaultSettings.watermark_y_space =   
  70.       parseInt((page_height   
  71.           - defaultSettings.watermark_y   
  72.           - defaultSettings.watermark_height   
  73.           * defaultSettings.watermark_rows)   
  74.          / (defaultSettings.watermark_rows - 1));  
  75.     }  
  76.     var x;  
  77.     var y;  
  78.     for (var i = 0; i < defaultSettings.watermark_rows; i++) {  
  79.         y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;  
  80.         for (var j = 0; j < defaultSettings.watermark_cols; j++) {  
  81.             x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;  
  82.   
  83.             var mask_div = document.createElement('div');  
  84.             mask_div.id = 'mask_div' + i + j;  
  85.             mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));  
  86.             //设置水印div倾斜显示  
  87.             mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
  88.             mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
  89.             mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
  90.             mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
  91.             mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
  92.             mask_div.style.visibility = "";  
  93.             mask_div.style.position = "absolute";  
  94.             mask_div.style.left = x + 'px';  
  95.             mask_div.style.top = y + 'px';  
  96.             mask_div.style.overflow = "hidden";  
  97.             mask_div.style.zIndex = "9999";  
  98.             //mask_div.style.border="solid #eee 1px";  
  99.             mask_div.style.opacity = defaultSettings.watermark_alpha;  
  100.             mask_div.style.fontSize = defaultSettings.watermark_fontsize;  
  101.             mask_div.style.fontFamily = defaultSettings.watermark_font;  
  102.             mask_div.style.color = defaultSettings.watermark_color;  
  103.             mask_div.style.textAlign = "center";  
  104.             mask_div.style.width = defaultSettings.watermark_width + 'px';  
  105.             mask_div.style.height = defaultSettings.watermark_height + 'px';  
  106.             mask_div.style.display = "block";  
  107.             oTemp.appendChild(mask_div);  
  108.         };  
  109.     };  
  110.     document.body.appendChild(oTemp);  
  111. }  
展开阅读全文

没有更多推荐了,返回首页