vue micro-channel page to add a watermark
this.$nextTick(function() {
watermark({ watermark_txt: "<div>" + '123' + "</div><div>" + '456' + "</div>"});
})
Watermark function (Settings) {
// defaults
var defaultSettings = {
watermark_txt: "text",
watermark_x: 70, the starting position of the watermark // x coordinate
watermark_y: 10, // Y coordinate of the starting position of the watermark
watermark_rows: 100, // number of rows watermark
watermark_cols: 2, // number of columns watermark
watermark_x_space: 60, // x-axis interval watermark
watermark_y_space: 40, // y-axis spacing watermark
watermark_color: '# aaa', // watermark font color
watermark_alpha: 0.3, // watermark transparency
watermark_fontsize: '. 26rem', // watermark font size
watermark_width: 60, // watermark width
watermark_height: 60, // height watermark
watermark_angle: 10 // number of inclination watermark
};
// use configuration item overrides the default value works like a 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();
//获取页面最大宽度
var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth) - 30;
//获取页面最大高度
// var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
Math.max page_height = var ($ ( "# iContainer") GET (0) .clientHeight, document.body.clientHeight, $ ( "# iContainer") GET (0) .scrollHeight..) - 20 is;
// var page_height . = $ ( "# iContainer") GET (0) .scrollHeight;
// console.log (page_height, $ ( "# iContainer") outerHeight ().);
// if the number of columns watermark is set to 0, or watermark the number of columns is too large, exceeding the maximum width of the page, then recalculate the watermark and the watermark columns 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 = the parseInt ((+ page_width-defaultSettings.watermark_x defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
= the parseInt defaultSettings.watermark_x_space ((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width defaultSettings.watermark_cols *) / (defaultSettings.watermark_cols -. 1));
}
// if the number of rows watermark setting is too large to 0, or the number of rows watermarks exceeds the maximum page length, the number of rows is recalculated watermark 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 = the parseInt ((+ page_height defaultSettings.watermark_y_space - 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; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
mask_div.innerHTML = defaultSettings.watermark_txt;
//设置水印div倾斜显示
mask_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 = "9999999";
mask_div.style.pointerEvents = "none";
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.lineHeight = '.32rem';
mask_div.style.display = "inline-block";
oTemp.appendChild(mask_div);
};
};
console.log($('.mask_div:odd'));
document.body.appendChild(oTemp);
$('.mask_div:odd').css({left:defaultSettings.watermark_x + 'px'});
$('.mask_div:even').css({right:defaultSettings.watermark_x + 'px'});
}