Shulou(Shulou.com)06/03 Report--

This article mainly explains "Javascript how to set watermark stack", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Javascript how to set watermark stack" bar!

Javascript sets watermark stacking method: 1, create page element p through javascript, and create text node in p element to display watermark content; 2, set p element style, set its zIndex to a higher value, and set transparency to achieve the watermark effect floating on the page.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How to set watermark stack for Javascript?

Watermark is full: html+javascript realizes dynamic page watermarking

1. Basic principles

After the page is loaded, create the page element p through javascript, and create a text node in the p element to display the watermark content

Set p element style, set its zIndex to a higher value, and set transparency to achieve the watermark effect floating on the page.

The core logic is as follows

Var mask_p = document.createElement ('p'); mask_p.id = 'mask_p1'; mask_p.appendChild (document.createTextNode ("test")); mask_p.style.position = "absolute"; mask_p.style.left =' 20pxrabbit; mask_p.style.top = '20pxrabbit; mask_p.style.overflow = "hidden"; mask_p.style.zIndex = "9999"; mask_p.style.opacity = 0.3 Document.body.appendChild (mask_p); 2. Continue to improve

The above example only shows a watermark somewhere on the page. In practical applications, it is often necessary to cover the page with watermarks.

While meeting this requirement, the following code provides various properties to the user in a configuration manner, which can be called flexibly as needed

Function watermark (settings) {/ / default setting var defaultSettings= {watermark_txt: "text", watermark_x:20,// watermark start position x-axis coordinates watermark_y:20,// watermark start position Y-axis coordinates watermark_rows:20,// watermark rows number of watermark_cols:20,// watermark columns watermark_x_space:100 / / watermark x-axis interval watermark_y_space:50,// watermark y-axis interval watermark_color:'#000000',// watermark font color watermark_alpha:0.3,// watermark transparency watermark_fontsize:'18px',// watermark font size watermark_font:' Microsoft yahei', / / watermark font watermark_width:120 / / Watermark width watermark_height:80,// Watermark length watermark_angle:15// Watermark skew degree} / / replace the default value with a configuration item, which works like jquery.extend if (arguments.length===1&&typeof arguments [0] = "object") {var src=arguments [0] | | {}; for (key in src) {if (SRC [key] & & defaultSettings [key] & & SRC [key] = defaultSettings [key]) continue Else if (SRC [key]) defaultSettings [key] = src [key];}} var oTemp = document.createDocumentFragment (); / / get the maximum page width var page_width = Math.max (document.body.scrollWidth,document.body.clientWidth); / / get the maximum page length var page_height = Math.max (document.body.scrollHeight,document.body.clientHeight) / / if the number of watermark columns is set to 0, or the number of watermark columns is set too large, exceeding the maximum width of the page Recalculate the number of watermark columns and the watermark x-axis interval if (defaultSettings.watermark_cols = = 0 | | (parseInt (defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols-1)) > page_width)) {defaultSettings.watermark_cols = parseInt ((page_width) -defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)) DefaultSettings.watermark_x_space = parseInt ((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols-1)) } / / if the number of watermark lines is set to 0, or the number of watermark lines is set too large to exceed the maximum length of the page Then recalculate the number of watermark lines and the watermark y-axis interval if (defaultSettings.watermark_rows = = 0 | | (parseInt (defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows-1)) > page_height)) {defaultSettings.watermark_rows = parseInt ((defaultSettings.watermark_y_space) + page_height-defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)) DefaultSettings.watermark_y_space = parseInt ((page_height-defaultSettings.watermark_y-defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows-1));} var x; var y; for (var I = 0; I < defaultSettings.watermark_rows) DefaultSettings.watermark_height +) {y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * I; for (var j = 0; j < defaultSettings.watermark_cols; jacks +) {x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_p = document.createElement ('p') Mask_p.id = 'mask_p' + I + j; mask_p.appendChild (document.createTextNode (defaultSettings.watermark_txt)); / / set watermark p to tilt mask_p.style.webkitTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_p.style.MozTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)" Mask_p.style.msTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_p.style.OTransform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_p.style.transform = "rotate (-" + defaultSettings.watermark_angle + "deg)"; mask_p.style.visibility = ""; mask_p.style.position = "absolute" Mask_p.style.left = x + 'px'; mask_p.style.top = y +' px'; mask_p.style.overflow = "hidden"; mask_p.style.zIndex = "9999"; / / mask_p.style.border= "solid # eee 1px"; mask_p.style.opacity = defaultSettings.watermark_alpha Mask_p.style.fontSize = defaultSettings.watermark_fontsize; mask_p.style.fontFamily = defaultSettings.watermark_font; mask_p.style.color = defaultSettings.watermark_color; mask_p.style.textAlign = "center"; mask_p.style.width = defaultSettings.watermark_width + 'px'; mask_p.style.height = defaultSettings.watermark_height +' px' Mask_p.style.display = "block"; oTemp.appendChild (mask_p);};}; document.body.appendChild (oTemp);}

3. Calling mode

Watermark ({watermark_txt: "test watermark"}) / / trigger watermark drawing when passing in dynamic watermark content / / onload _ window.onload=function () {watermark ({watermark_txt: "test watermark"});}; / / onresize trigger watermark drawing _ window.onresize = function () {watermark ({watermark_txt: "test watermark", watermark_width:50})} Thank you for reading, the above is the content of "how to set watermark stack in Javascript". After the study of this article, I believe you have a deeper understanding of how to set watermark stack in Javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.