Text: Using JavaScript to implement dynamic watermark of Web pages
1. Fundamentals
- 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
- 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