Bagaimana untuk menetapkan timbunan tera air dalam Javascript

Cara menetapkan tindanan tera air dalam Javascript: 1. Cipta elemen halaman p melalui javascript, dan cipta nod teks dalam elemen p untuk memaparkan kandungan tera air 2. Tetapkan gaya elemen p dan tetapkan zIndexnya kepada nilai yang lebih tinggi dan tetapkan ketelusan untuk mencapai kesan tera air terapung pada halaman.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk menetapkan timbunan tera air dalam Javascript?

Tanda air ada di mana-mana: html javascript melaksanakan tera air halaman dinamik

1. Prinsip asas

• Selepas halaman dimuatkan , cipta elemen halaman p melalui javascript dan buat nod teks dalam elemen p, paparkan kandungan tera air

• tetapkan gaya elemen p, tetapkan zIndexnya kepada nilai yang lebih tinggi, dan tetapkan ketelusan , untuk mencapai kesan tera air terapung pada halaman

Logik teras adalah seperti berikut

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. Teruskan meningkatkan

Contoh di atas hanya memaparkan tera air di suatu tempat pada halaman Dalam aplikasi sebenar, selalunya perlu menutup halaman dengan tera air

Pada masa yang sama untuk bertemu. permintaan ini, kod berikut menyediakan pelbagai atribut untuk digunakan dalam mod konfigurasi Anda boleh secara fleksibel memanggil

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);
}

mengikut keperluan

Atas ialah kandungan terperinci Bagaimana untuk menetapkan timbunan tera air dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!