const watermark = {}
const setWatermark = (str) => {
? const id = '1.23452384164.123412415'
? if (document.getElementById(id) !== null) {
? ? document.body.removeChild(document.getElementById(id))
? }
? // 默認(rèn)設(shè)置
? var defaultSettings = {
? ? watermark_txt: str,
? ? watermark_x: 30, // 水印起始位置x軸坐標(biāo)
? ? watermark_y: 30, // 水印起始位置Y軸坐標(biāo)
? ? watermark_rows: 4, // 水印行數(shù)
? ? watermark_cols: 2, // 水印列數(shù)
? ? watermark_x_space: 20, // 水印x軸間隔
? ? watermark_y_space: 20, // 水印y軸間隔
? ? watermark_color: '#aaa', // 水印字體顏色
? ? watermark_alpha: 0.3, // 水印透明度
? ? watermark_fontsize: '15px', // 水印字體大小
? ? watermark_font: '微軟雅黑', // 水印字體
? ? watermark_width: 150, // 水印寬度
? ? watermark_height: 120, // 水印長(zhǎng)度
? ? watermark_angle: 15// 水印傾斜度數(shù)
? }
? var oTemp = document.createDocumentFragment()
? var x
? var y
? for (var i = 0; i < 4; i++) {
? ? y = (100 + document.documentElement.clientHeight - 480) / 5 + ((document.documentElement.clientHeight - 480) / 5 + defaultSettings.watermark_height) * i
? ? for (var j = 0; j < 2; j++) {
? ? ? x = (document.documentElement.clientWidth - 300) / 3 + (defaultSettings.watermark_width + ((document.documentElement.clientWidth - 300) / 3)) * j
? ? ? var maskDiv = document.createElement('div')
? ? ? maskDiv.id = 'mask_div' + i + j
? ? ? maskDiv.className = 'mask_div'
? ? ? maskDiv.appendChild(document.createTextNode(defaultSettings.watermark_txt))
? ? ? // 設(shè)置水印div傾斜顯示
? ? ? maskDiv.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
? ? ? maskDiv.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
? ? ? maskDiv.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
? ? ? maskDiv.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
? ? ? maskDiv.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
? ? ? maskDiv.style.visibility = ''
? ? ? maskDiv.style.position = 'fixed'
? ? ? maskDiv.style.left = x + 'px'
? ? ? maskDiv.style.top = y + 'px'
? ? ? maskDiv.style.overflow = 'hidden'
? ? ? maskDiv.style.zIndex = '9999'
? ? ? // mask_div.style.border="solid #eee 1px";
? ? ? maskDiv.style.opacity = defaultSettings.watermark_alpha
? ? ? maskDiv.style.fontSize = defaultSettings.watermark_fontsize
? ? ? maskDiv.style.fontFamily = defaultSettings.watermark_font
? ? ? maskDiv.style.color = defaultSettings.watermark_color
? ? ? maskDiv.style.textAlign = 'center'
? ? ? maskDiv.style.width = defaultSettings.watermark_width + 'px'
? ? ? maskDiv.style.height = defaultSettings.watermark_height + 'px'
? ? ? maskDiv.style.display = 'block'
? ? ? maskDiv.style.pointerEvents = 'none'// fangzi
? ? ? oTemp.appendChild(maskDiv)
? ? }
? }
? document.body.appendChild(oTemp)
? return id
}
// 該方法只允許調(diào)用一次
watermark.set = (str) => {
? setWatermark(str)
? // let id = setWatermark(str)
? // setInterval(() => {
? //? if (document.getElementById(id) === null) {
? //? ? id = setWatermark(str)
? //? }
? // }, 2000)
? // window.onresize = () => {
? //? setWatermark(str)
? // }
}
export default watermark
頁面調(diào)用 watermark.set(“這里面就是要添加水印的內(nèi)容”)
