使用Javascript实现网页水印(非图片水印).doc_可以滚动的水印资源-CSDN文库

版权申诉

54 浏览量 2022-06-11 10:18:13 上传评论收藏 7KB DOC 举报

【JavaScript实现网页水印技术详解】网页水印是一种在网页上添加不可擦除标识的技术，通常用于保护版权或增加品牌识别度。与图片水印不同，JavaScript实现的网页水印是在网页元素上动态生成文本或图形，使得水印与页面内容紧密融合。本文将详细介绍如何使用JavaScript来创建非图片形式的网页水印。 1. **基本原理** JavaScript水印的实现主要是通过修改HTML元素的CSS属性，如字体、颜色、透明度、角度等，使其形成一种既不干扰正常内容阅读，又能明显辨识的标记。此外，水印可以是静态的，也可以动态生成，例如根据用户行为或时间戳变化。 2. **选择合适的元素** 在网页中，可以将水印添加到背景或者特定的DOM元素上。例如，使用`<body>`标签作为水印载体，或者选择一个宽高覆盖整个屏幕的div。确保所选元素具有足够的可见性，但不会遮挡主要内容。 3. **CSS样式设置** 使用CSS来定义水印的样式，如： - `font-size`: 控制字体大小，使水印文字既不太大也不太小。 - `color`: 设置颜色，通常选择与背景色相近但有对比度的颜色，以达到半透明效果。 - `opacity`: 调整透明度，让水印既清晰可见又不抢眼。 - `transform`: 应用旋转和倾斜，使得水印与页面融为一体，避免过于突兀。 - `text-shadow`: 添加阴影效果，增加立体感。 - `position`: 设置为绝对或固定，确保水印始终在页面的某个位置。 4. **JavaScript代码实现** 创建一个JavaScript函数，用于在页面加载时添加水印。这个函数可以接收水印的文本内容、颜色、透明度等参数，并根据这些参数设置CSS样式。例如： ```javascript function addWatermark(text, color, opacity) { const watermarkDiv = document.createElement('div'); watermarkDiv.textContent = text; watermarkDiv.style.color = color; watermarkDiv.style.opacity = opacity; // 其他CSS设置... document.body.appendChild(watermarkDiv); } // 调用函数，添加水印 addWatermark('您的水印文本', 'rgba(0, 0, 0, 0.3)', 0.3); ``` 5. **动态更新和适应性** 如果需要，可以通过监听用户交互事件（如滚动、缩放）或定时器来动态更新水印，如改变位置、颜色等。同时，确保水印在不同分辨率和设备上都能正确显示，可能需要对布局和样式进行响应式设计。 6. **优化与兼容性** 考虑到浏览器兼容性，可以使用polyfills或条件语句来支持较旧版本的浏览器。同时，对于禁止JavaScript的用户，可能需要提供备用方案，如CSS伪元素实现的静态水印。 7. **安全性和用户体验** 虽然JavaScript水印提供了灵活性，但它并不像服务器端生成的水印那样难以被篡改。因此，对于重要的版权保护，应结合其他方法，如数字签名或版权信息隐藏。同时，应确保水印不影响用户的正常浏览体验，避免过度干扰。使用JavaScript实现的网页水印是一种便捷且灵活的方式，可以在不使用图片的情况下为网页添加个性化标识。通过合理的CSS样式和JavaScript处理，可以创建出既美观又实用的网页水印。

资源推荐

资源详情

资源评论

Date: Sun, 30 Jan 2011 05:09:42 +0000

MIME-Version: 1.0

Content-Type: multipart/related;

boundary="--90E1118DDD27F81352178EE76461B8DE_MULTIPART_MIXED";

type="text/html"

X-MimeOLE: Produced By Mht File Maker v1.0 beta

This is a multi-part message in MIME format.

----90E1118DDD27F81352178EE76461B8DE_MULTIPART_MIXED

Content-Type: text/html

Content-Transfer-Encoding: base64

Content-Location: tmp.html

PERJViBpZD1jb250ZW50Pg0KPFA+MSC4xcr2PEJSPjEuMSC2qNLlPC9QPg0KPFA+1NrSu9CpQi9T

veG5ubXE06bTw8+1zbPW0KOs09C63Lbg0rPD5srH0OjSqtPQy67TobXEoaOzo7z7tcS+zcrHuavO

xM+1zbOhorrPzazPtc2ztciho7TzvNKzo7OjudjXorXEysfN+NW+zbzGrNT2vNPLrtOho6y2+Lrc

ydm52Nei0rPD5suu06Gho7jVyKVHb29nbGXBy9K7yKajrLnY09rSs8Pmy67TobXEzsTVwrXEyv3B

v86qvLi69c6qMC4gsb7OxNbQo6zB98WjxL7C7b7N0+u087zS0rvG8L27wffSu8/C09C52NbG1/fN

+NKzy67TobXE0MS1w6GjPC9QPg0KPFA+sb7OxMzWwtvS1M/CtcTH6dDOo7og0MLU9suu06G1xLe9

t6jQ6NKq08NKYXZhc2NyaXB0zeqzyaOssqLSqsfzxNy5u7e9seO12LzTyOu1vdSt09C1xNKzw+bW

0KOssrvE3NOwz+y1vdLR09C1xLmmxNyhozwvUD4NCjxQPjEuMiDUpMbaxL+x6jwvUD4NCjxQPr7N

zbzGrMuu06HKtc/Wt72wuMC0y7WjrM7Sw8fUpMba1sHJ2bD8wKjS1M/CvLi49sS/seqjujwvUD4N

CjxQPjEuIMq1z9bQ/LihoaKw6824w/e1xM28xqzLrtOhPC9QPg0KPFA+Mi4gsPy6rMuu06G1xNKz

w+ajrMv509DUqsvYvvnOqta7tsEosru/ydC0KTwvUD4NCjxQPjMuINTasPy6rL/yvNzSs8Pm1tCj

rL/J0tS/2NbGyM7S4tK7uPbX09Kzw+a78ri40rPD5rXEy67Tocn6s8k8L1A+DQo8UD40LiDU2tKz

w+a3xbTzoaLL9dChKHJlc2l6Zbn9s8wpuvOjrNDo0qrU2rGj1qTSs8PmsrvLotDCtcTHsMzhz8Kj

rNbY0MLJ+rPJysrTptKzw+a089ChtcTQwsuu06GjrNLUsaPWpMv509DE2sjdtryxu8uu06G4srjH

o6yyosfSsru74dLyy67Toc28xqy3ts6nuf2087b4svrJ+rn2tq/M9aGjPC9QPg0KPFA+NS4g1qez

1klFNlw3XDjkr8DAxveho9Tdsru/vMLHxuTL++SvwMDG96GjPC9QPg0KPFA+MS4zINCnufvNvDwv

UD4NCjxQPrzTw9zHsKO6PC9QPg0KPFA+Jm5ic3A7PC9QPg0KPFA+vNPD3Lrzo7o8L1A+DQo8UD4m

bmJzcDs8L1A+DQo8UD6/ydLUtPK/qri9vP7A77XEzsS8/r340NCy6b+0oaM8L1A+DQo8UD4yIMq1

z9ayvdboPEJSPjIuMSC7+bG+ubnLvDwvUD4NCjxQPrzTw9y1xLn9s8zKx9K7uPZKYXZhc2NyaXB0

uq/K/da00NC5/bPMo6zL+dLUztLDx8rXz8jTprjDv7zCx9PDSmF2YXNjcmlwdLLZ1/dET0221M/z

tcS3vcq9oaM8L1A+DQo8UD7U2tLR09C1xEhUTUzSs8Pm1tCjrNDCvajSu7j2RE9NttTP89TaQm9k

eb3atePPwqGjuMO21M/ztcSzpKGiv+2++b6tuf28xsvjo6yxo9ak1Nq4srjHyKuyv9Kzw+bE2sjd

tcTNrMqx09ayu7L6yfq59ravzPWho72ruMO21M/zuLK4x7W91K3T0LXE0rPD5tauyc+jrMno1sOx

s76wzbyjrLKiyejWw86qzbjD96GjPC9QPg0KPFA+tLS9qNDCRE9N1KrL2KO6PC9QPg0KPFA+yrnT

w2RvY3VtZW50ttTP88DvtcRjcmVhdGVFbGVtZW50t723qKGjtLS9qNSqy9i686OsyejWw8v8tcR6

LWluZGV4zqrSu7j2tPPV+8r9o6yxo9aky/zE3Lm7scjS0dPQzfjSs7XE1+6083otaW5kZXi086Os

ssXE3M3qs8mhsLiyuMehsaGjPC9QPg0KPFA+vMbL49DCttTP87Tz0KGjujwvUD4NCjxQPsD708PI

/bj2RE9NttTP89a1o7ogY2xpZW50V2lkdGggoaJzY3JvbGxIZWlnaHTT62NsaWVudEhlaWdodC48

L1A+DQo8UD7N+NKz1tDSu7Djsru74bP2z9a64c/yufa2r8z1o6y5yrK7yrnTw3Njcm9sbFdpZHRo

LjwvUD4NCjxQPrb4193P8rXEufa2r8z1vs263LOjvPvBy6GjPC9QPg0KPFA+zqrBy7Gj1qTSs8Pm

xNrI3cirsr+4srjHo6zU2s60s/bP1rn2tq/M9bXEyrG68qOsyrnTw2NsaWVudEhlaWdodKOss/bP

1rn2tq/M9brzo6zU8sq508NzY3JvbGxIZWlnaHShozwvUD4NCjxQPjxCUj7J6NbDzbjD96O6PC9Q

Pg0KPFA+wPvTw0FscGhh1rWho0FscGhhysdJRdans9a1xGNzcyBmaWx0ZXKhozwvUD4NCjxQPjIu

MiDTprHkz7i92jwvUD4NCjxQPtPQ0ru49tChz7i92srHutzT0NLiy7y1xKOsx7DOxNKyzOG5/cHL

o6y+zcrHcmVzaXpltcS5/bPMoaM8L1A+DQo8UD7K1M/ro6y1sdK7uPbSs8PmtPK/qrXEyrG68srH

NTUwcHihwTQwMHB4o6zEx8O019TIu7vhyfqzyTU1MHB4ocE0MDBweLTz0KG1xMuu06Gho7WrtbHT

w7unttTL/L340NDX7rTzu6/KsaOs0rPD5sO709DLotDCo6yyu7vh1tjQwta00NDJ+rPJy67TobXE

uq/K/aOsxMfDtNLUx7DJ+rL6tcTLrtOhzbzGrL7NzKvQocHLoaM8L1A+DQo8UD7I58/CzbzL+cq+

tcTH6b/2oaPH69ei0uKjrMv8tcTT0rLgoaLPwrLgtrzKx8O709DLrtOhtcShozwvUD4NCjxQPiZu

YnNwOzwvUD4NCjxQPs6qwcvTprbU1eLW1sfpv/ajrM7Sw8e+zdDo0qq21GJvZHm1xG9ucmVzaXpl

KCm6r8r9vfjQ0LSmwO2ho8jnufvS1MewtqjS5cO709BvbnJlc2l6ZSgpuq/K/aOs1PLWsb3TzO28

029ucmVzaXplKCmju8jnufvS1Mew09BvbnJlc2l6ZSgpuq/K/aOs1PK21NauvfjQ0NDeuMShozwv

UD4NCjxQPjIuMyDX7tbVtPrC6zwvUD4NCjxQPr+8wse1vb/yvNzSs8Pm0OjSqr+8wse1xMfpv/aj

rLjDt723qLD8wKjI/bj2ss7K/aO6IMS/serSs8PmttTP86GixL+x6tKzw+bX1rf7tK6hoiCxs76w

zbzGrKGjPC9QPg0KPFA+ZnVuY3Rpb24gR2V0V2F0ZXJNYXJrZWQodGFyZ2V0T2JqLGpwZ1VybCx0

YXJnZXRTdHIgKSB7PC9QPg0KPFA+dmFyIHdpbmRvd29iaj10YXJnZXRPYmo7PC9QPg0KPFA+dmFy

IHdhdGVyTWFya1BpY1VybD1qcGdVcmw7PC9QPg0KPFA+dmFyIGNvbnRyb2xXaW5kb3dTdHI9dGFy

Z2V0U3RyOzwvUD4NCjxQPmlmKHdpbmRvd29iai5kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgid2F0

ZXJNYXJrIikgIT0gbnVsbCk8L1A+DQo8UD5yZXR1cm47PC9QPg0KPFA+dmFyIG0gPSAid2F0ZXJN

YXJrIjs8L1A+DQo8UD52YXIgbmV3TWFyayA9IHdpbmRvd29iai5kb2N1bWVudC5jcmVhdGVFbGVt

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

版权申诉

omyligaga

粉丝: 97
资源: 2万+

使用Javascript实现网页水印(非图片水印).doc

网页javascript 精华代码集.doc

用javascript实现网页上的浮动广告.doc

Javascript 网页水印(非图片水印)实现代码

【JavaScript源代码】vue实现页面添加水印效果.docx

jquery实现的网页水印

javascript添加背景水印

图片缓存和水印

网页设计设计报告(3).doc

easy-doc.zip

去水印工具

46个ASP.NET学习大全(包括水晶报表、验证码、水印、MVC、Web服务)

去图片水印软件javascript:void(0);

水印js插件

通过js给网页加上水印背景实例

web-watermark:网页水印

jquery word export 导出html内容(包括图片)

VS2008-用JQuery实现Ajax效果.rar

PHP工程师面试笔试真题(某知名监控产品服务商)-附解析.doc

计算机专业毕业设计题目_大全.doc

Lodop打印工具及相关技术手册

jquery 页面背景水印

JS生成页面水印插件.rar

Java实现给图片添加水印.doc

JS用层实现为图片添加水印效果

后台管理系统用户手册范本.doc

Lodop5.023.rar

photoshop-javaScript

最新资源