网站添加水印功能【java#HTML】

最新推荐文章于 2024-06-29 16:01:21 发布

chegp1135405274

最新推荐文章于 2024-06-29 16:01:21 发布

阅读量895

点赞数 1

分类专栏：系统开发文章标签： js html javascript java

本文链接：https://blog.csdn.net/qq_32469419/article/details/110233789

版权

本文介绍了如何在网站上添加水印功能，通过展示JavaScript代码和简单的HTML引用，展示了其实现过程。代码简洁易懂，适用于快速为网站添加个性化水印。

摘要由CSDN通过智能技术生成

网站增加水印功能

话不多说，最近做的一个项目，需要用到一个水印功能，直接贴js代码和效果图
自己先写一个js，
JS代码部分：

function waterMark(settings) {
	if($(".mask_div").length>0) return;
    //默认设置
    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: '#aaa', //水印字体颜色
        watermark_alpha: 0.4, //水印透明度
        watermark_fontsize: '15px', //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_width: 210, //水印宽度
        watermark_height: 80, //水印长度
        watermark_angle: 20 //水印倾斜度数
    };
    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);