返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript如何设置水印叠堆
  • 846
分享到

Javascript如何设置水印叠堆

2024-04-02 19:04:59 846人浏览 独家记忆
摘要

这篇文章主要讲解了“javascript如何设置水印叠堆”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript如何设置水印叠堆”吧!

这篇文章主要讲解了“javascript如何设置水印叠堆”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript如何设置水印叠堆”吧!

Javascript设置水印叠堆的方法:1、通过javascript创建页面元素p,并在p元素中创建文本节点,展示水印内容;2、设置p元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果即可。

Javascript如何设置水印叠堆

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

Javascript怎么设置水印叠堆?

水印铺满:html+javascript实现动态页面水印

1.基本原理

  • 页面加载后,通过javascript创建页面元素p,并在p元素中创建文本节点,展示水印内容

  • 设置p元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果

其核心逻辑如下所示

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.继续完善

上述示例只在页面某处展示了一个水印,实际应用中往往需要在页面中铺满水印

在满足这种需求同时,下述代码将各种属性以配置方式提供给使用者,可根据需要灵活调用

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('p');
            mask_p.id = 'mask_p' + 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 + 'px';
            mask_p.style.top = y + 'px';
            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 + 'px';
            mask_p.style.height = defaultSettings.watermark_height + 'px';
            mask_p.style.display = "block";
            oTemp.appendChild(mask_p);
        };
    };
    document.body.appendChild(oTemp);
}

3.调用方式

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

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

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

感谢各位的阅读,以上就是“Javascript如何设置水印叠堆”的内容了,经过本文的学习后,相信大家对Javascript如何设置水印叠堆这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: Javascript如何设置水印叠堆

本文链接: https://www.lsjlt.com/news/83882.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Javascript如何设置水印叠堆
    这篇文章主要讲解了“Javascript如何设置水印叠堆”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript如何设置水印叠堆”吧! ...
    99+
    2024-04-02
  • 电脑在打印的时候应该如何设置水印
    这篇文章将为大家详细讲解有关电脑在打印的时候应该如何设置水印,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体操作:点击“控制面板”,找到“硬件和声音”下的“查看设备和打印机”,然后找到打印机的图标并点击...
    99+
    2023-06-27
  • 详解如何利用JavaScript绘制堆叠柱状图
    效果图 this.state.workChartList的数据结构 const workChartList = [ { name: "居民热线", chartData: [5, ...
    99+
    2024-04-02
  • Python+matplotlib如何绘制堆叠图
    这篇文章主要介绍Python+matplotlib如何绘制堆叠图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、水平堆叠图堆叠图其实就是柱状图的一种特殊形式from matplotlib imp...
    99+
    2023-06-29
  • 调试JavaScript代码如何打印调用堆栈
    小编给大家分享一下调试JavaScript代码如何打印调用堆栈,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!打印调用堆栈可以通过调试面板查看当前代码的调用堆栈,也...
    99+
    2023-06-27
  • pr如何去水印
    这篇文章主要讲解了“pr如何去水印”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“pr如何去水印”吧!pr去水印的方法:首先进入pr软件,点击“效果”。 然后在搜索栏中搜索“中间值”。 将其添...
    99+
    2023-07-02
  • 多折线堆叠图如何制作?
    润乾报表有丰富的图形展现效果,不仅自带了多种统计图形,还内置了第三方统计图形 D3 还有 echarts 统计图。最近好多客户提出想要实现多折线堆叠的统计图,我用自带的图形和 echarts 两种方式做了多折线堆叠的报表示例,和大家分享下。...
    99+
    2023-06-02
  • VB.NET如何实现水印
    这篇文章主要介绍了VB.NET如何实现水印,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。水印技术VB.NET水印类(watermark)包含很多属性,可用于测定在原图像的哪个...
    99+
    2023-06-17
  • ps水印如何去掉
    这篇文章主要介绍了ps水印如何去掉,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。方法如下将有水印的图片导入PS快捷键Ctrl+shift+u去色快捷键Ctrl+L打开色阶,点...
    99+
    2023-06-15
  • Java如何添加水印
    这篇文章将为大家详细讲解有关Java如何添加水印,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JAVA/JSP在图片中添加文字或在图片中添加图片.import java.awt.Color;import ...
    99+
    2023-06-03
  • word水印如何添加
    本篇内容主要讲解“word水印如何添加”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“word水印如何添加”吧!word水印添加的方法:首先进入word文档,然后点击“页面布局”选择自己喜欢的水印...
    99+
    2023-07-01
  • photoshop水印如何去除
    这篇文章主要介绍了photoshop水印如何去除的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇photoshop水印如何去除文章都会有所收获,下面我们一起来看看吧。ps去水印的方法:方法一: 首先通过左上角“文...
    99+
    2023-07-01
  • CSS如何实现照片堆叠效果
    这篇文章主要介绍了CSS如何实现照片堆叠效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   步骤   1.初始index.html ...
    99+
    2024-04-02
  • qt如何设置堆栈大小
    在Qt中,可以通过设置QThread类的堆栈大小来控制线程的堆栈大小。可以使用`QThread::setStackSize()`函数...
    99+
    2023-10-28
    qt
  • linux如何设置堆栈大小
    在Linux中,可以使用以下方法来设置堆栈大小: 使用ulimit命令:ulimit命令用于设置或显示用户进程资源限制。可以使用...
    99+
    2023-10-28
    linux
  • java堆栈大小如何设置
    在Java虚拟机中,堆和栈是两种不同的内存区域。 堆用于存储对象实例和数组,而栈用于存储方法调用和局部变量。 要设置Java堆的大小...
    99+
    2023-10-28
    java
  • win10如何设置窗口不重叠
    要设置窗口不重叠,可以按照以下步骤操作:1. 右键点击任务栏上的空白处,选择“任务栏设置”。2. 在任务栏设置窗口中,找到“任务栏”...
    99+
    2023-08-26
    win10
  • windows中inpaint如何去水印
    本篇内容介绍了“windows中inpaint如何去水印”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-12-09
    windows inpaint
  • Android怎么设置重复文字水印背景
    这篇文章主要介绍“Android怎么设置重复文字水印背景”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android怎么设置重复文字水印背景”文章能帮助大家解决问题。效果如图:自定义Drawable...
    99+
    2023-07-02
  • iPhone 16的设计特点是堆叠式后置感光元件
    iPhone 16 系列将在全线型号也采用堆叠式后置感光元件设计。 该设计在今年的 iPhone 15 标准版上已有类似的应用。今年的标准版iPhone 15和iPhone 15 Plus预期将配备一个4800万像素的后置镜头,并使用能够捕...
    99+
    2023-08-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作