Using JavaScript to implement dynamic watermark of Web pages

Text: Using JavaScript to implement dynamic watermark of Web pages

1. Fundamentals

1. After the page is loaded, create a page element div from JavaScript and create a text node in the DIV element to display the watermark content
2. Set the DIV element style, set its zindex to a higher value, and set the transparency to achieve the watermark effect floating on the page

Its core logic is as follows

 varMask_div = Document.createelement ('Div'); Mask_div.id='Mask_div1'; Mask_div.appendchild (document.createTextNode ("Test")); Mask_div.style.position="Absolute"; Mask_div.style.left='20px'; Mask_div.style.top='20px'; Mask_div.style.overflow="Hidden"; Mask_div.style.zIndex="9999"; Mask_div.style.opacity=0.3;d Ocument.body.appendChild (mask_div);

2. Continue to improve

The above example only shows a watermark somewhere in the page, and the actual application often requires a full watermark on the page Zhong Pu

While satisfying this requirement, the following code provides a variety of properties to the consumer in a configurable manner, which can be flexibly invoked as needed

/** * Created with JetBrains phpstorm. * User:ronniegong * date:14-11-4 * Time: PM 6:02 * To change this template use F ile | Settings | File Templates. */function watermark (settings) {//Default Settings    vardefaultsettings={watermark_txt:"text", watermark_x: -,//watermark start position x axis coordinatesWatermark_y: -,//watermark start Position y axis coordinatesWatermark_rows: -,//Number of watermark linesWatermark_cols: -,//Number of watermark columnsWatermark_x_space: -,//watermark X-axis intervalWatermark_y_space: -,//Watermark Y-axis intervalWatermark_color:'#000000',//Watermark Font ColorWatermark_alpha:0.3,//Watermark TransparencyWatermark_fontsize:'18px',//Watermark Font SizeWatermark_font:'Microsoft Ya-Black',//Watermark FontWatermark_width: -,//Watermark WidthWatermark_height: the,//Watermark LengthWatermark_angle: the//Watermark Tilt Number    }; //Replace default values with configuration items that act like Jquery.extend    if(arguments.length===1&&typeofarguments[0] ==="Object" )    {        varsrc=arguments[0]||{};  for(Keyinchsrc) {            if(src[key]&&defaultsettings[key]&&src[key]===Defaultsettings[key])Continue; Else if(Src[key]) Defaultsettings[key]=Src[key]; }    }    varOtemp =document.createdocumentfragment (); //get the maximum page width    varPage_width =Math.max (document.body.scrollwidth,document.body.clientwidth); //get the maximum page length    varPage_height =Math.max (document.body.scrollheight,document.body.clientheight); //If you set the number of watermark columns to 0, or if the number of watermark columns is too large to exceed 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 if the number of watermark rows is too large to exceed the maximum length of the page, the number of watermarks and the y-axis interval of the watermark are recalculated .    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)); }    varx; vary;  for(vari =0; i < defaultsettings.watermark_rows; i++) {y= Defaultsettings.watermark_y + (defaultsettings.watermark_y_space + defaultsettings.watermark_height) *i;  for(varj =0; J < Defaultsettings.watermark_cols; J + +) {x= defaultsettings.watermark_x + (defaultsettings.watermark_width + defaultsettings.watermark_x_space) *J; varMask_div = Document.createelement ('Div'); Mask_div.id='Mask_div'+ i +J;            Mask_div.appendchild (document.createTextNode (defaultsettings.watermark_txt)); //Set watermark div Tilt DisplayMask_div.style.webkitTransform ="Rotate (-"+ Defaultsettings.watermark_angle +"deg)"; Mask_div.style.MozTransform="Rotate (-"+ Defaultsettings.watermark_angle +"deg)"; Mask_div.style.msTransform="Rotate (-"+ Defaultsettings.watermark_angle +"deg)"; Mask_div.style.OTransform="Rotate (-"+ Defaultsettings.watermark_angle +"deg)"; Mask_div.style.transform="Rotate (-"+ Defaultsettings.watermark_angle +"deg)"; Mask_div.style.visibility=""; Mask_div.style.position="Absolute"; Mask_div.style.left= x +'px'; Mask_div.style.top= y +'px'; Mask_div.style.overflow="Hidden"; Mask_div.style.zIndex="9999"; //mask_div.style.border= "Solid #eee 1px";Mask_div.style.opacity =Defaultsettings.watermark_alpha; Mask_div.style.fontSize=defaultsettings.watermark_fontsize; Mask_div.style.fontFamily=Defaultsettings.watermark_font; Mask_div.style.color=Defaultsettings.watermark_color; Mask_div.style.textAlign="Center"; Mask_div.style.width= Defaultsettings.watermark_width +'px'; Mask_div.style.height= Defaultsettings.watermark_height +'px'; Mask_div.style.display="Block";        Otemp.appendchild (MASK_DIV);    };    }; Document.body.appendChild (otemp);}

3. Invocation mode

 Watermark ({watermark_txt:  "  test watermark  Span style= "color: #800000;" "}) //  incoming dynamic watermark content  // onload when Watermark is drawn  window.onload=  "  test watermark   "  // onresize trigger watermark draw  window.onresize = function () { Watermark ({watermark_txt:    test watermark  , Watermark_width:50   }) };

4. Page effects

Using JavaScript to implement dynamic watermark of Web pages