So legen Sie den Wasserzeichenstapel in Javascript fest

So legen Sie den Wasserzeichenstapel in Javascript fest: 1. Erstellen Sie das Seitenelement p über Javascript und erstellen Sie einen Textknoten im p-Element, um den Wasserzeicheninhalt anzuzeigen. 2. Legen Sie den Stil des p-Elements fest und setzen Sie seinen zIndex auf a einen höheren Wert und legen Sie die Transparenz fest, um einen auf der Seite schwebenden Wasserzeicheneffekt zu erzielen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wie stelle ich das Stapeln von Wasserzeichen in Javascript ein?

Überall Wasserzeichen: HTML + Javascript zur Realisierung dynamischer Seitenwasserzeichen

1. Grundprinzip

• Erstellen Sie nach dem Laden der Seite das Seitenelement p über Javascript und erstellen Sie einen Textknoten im p-Element zum Anzeigen des Wasserzeicheninhalts

• Legen Sie den Stil des p-Elements fest, setzen Sie seinen zIndex auf einen höheren Wert und legen Sie die Transparenz fest, um einen auf der Seite schwebenden Wasserzeicheneffekt zu erzielen

Die Kernlogik lautet wie folgt

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 =  '20px';
    mask_p.style.top =  '20px';
    mask_p.style.overflow = "hidden";
    mask_p.style.zIndex = "9999";
    mask_p.style.opacity = 0.3;
　　document.body.appendChild(mask_p);

2. Weiter verbessern

Das obige Beispiel zeigt nur irgendwo auf der Seite ein Wasserzeichen an. In tatsächlichen Anwendungen ist es häufig erforderlich, die Seite mit Wasserzeichen zu versehen. Um dieser Anforderung gerecht zu werden, bietet der folgende Code verschiedene Attribute für den Benutzer in einem Konfigurationsmodus, der nach Bedarf verwendet werden kann. Flexibler Aufruf

function watermark(settings) {

    //默认设置
    var defaultSettings={
        watermark_txt:"text",
        watermark_x:20,//水印起始位置x轴坐标
        watermark_y:20,//水印起始位置Y轴坐标
        watermark_rows:20,//水印行数
        watermark_cols:20,//水印列数
        watermark_x_space:100,//水印x轴间隔
        watermark_y_space:50,//水印y轴间隔
        watermark_color:'#000000',//水印字体颜色
        watermark_alpha:0.3,//水印透明度
        watermark_fontsize:'18px',//水印字体大小
        watermark_font:'微软雅黑',//水印字体
        watermark_width:120,//水印宽度
        watermark_height:80,//水印长度
        watermark_angle:15//水印倾斜度数
    };
    //采用配置项替换默认值，作用类似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);
    //获取页面最大长度
    var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

    //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
    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));
    }
    //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
    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; 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_p = document.createElement(&#39;p&#39;);
            mask_p.id = &#39;mask_p&#39; + i + j;
            mask_p.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            //设置水印p倾斜显示
            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 + &#39;px&#39;;
            mask_p.style.top = y + &#39;px&#39;;
            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 + &#39;px&#39;;
            mask_p.style.height = defaultSettings.watermark_height + &#39;px&#39;;
            mask_p.style.display = "block";
            oTemp.appendChild(mask_p);
        };
    };
    document.body.appendChild(oTemp);
}

3 Aufrufmethode

watermark({ watermark_txt: "测试水印" })//传入动态水印内容

//onload时触发水印绘制
window.onload=function(){
watermark({ watermark_txt: "测试水印" });
};

//onresize时触发水印绘制
window.onresize = function () {
 watermark({ watermark_txt: "测试水印",watermark_width:50 }) 
};

Empfohlenes Lernen: „

Javascript-Grundlagen-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo legen Sie den Wasserzeichenstapel in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!