當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS加水印遮罩

發布時間：2024/4/17 javascript 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS加水印遮罩小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>懸浮水印</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="watermark.js"></script></head><body onload="GetWaterMarked(window,'watermark.jpg','this')"><div>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </div></body> </html> function GetWaterMarked(targetObj,jpgUrl,targetStr ) {var windowobj=targetObj;var waterMarkPicUrl=jpgUrl;var controlWindowStr=targetStr;if(windowobj.document.getElementById("waterMark") != null)return;var m = "waterMark";var newMark = windowobj.document.createElement("div");newMark.id = m;//定義div絕對位置newMark.style.position = "absolute";newMark.style.top = "0px";newMark.style.left = "0px";//設置div堆疊順序，若為正數，則離用戶更近，為負，數則表示離用戶更遠newMark.style.zIndex = "99999";//使用瀏覽器寬newMark.style.width = windowobj.document.body.clientWidth;//頁面實際長度(不顯示豎向滾動條)>瀏覽器長if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ){newMark.style.height = windowobj.document.body.scrollHeight;}else{newMark.style.height = windowobj.document.body.clientHeight;}//使用水印圖片設為div背景newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";//透明樣式newMark.style.filter = "alpha(opacity=20)";//加入div windowobj.document.body.appendChild(newMark);var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;";if(windowobj.document.body.onresize != null){var oldResiae = windowobj.document.body.onresize.toString();var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1);var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}"));oldResiaeStr+=";"+markStr;windowobj.document.body.onresize = new Function(oldResiaeStr);}else{windowobj.document.body.onresize = new Function(markStr);}}

轉載于:https://www.cnblogs.com/XueRong-7/p/4503907.html

總結

以上是生活随笔為你收集整理的JS加水印遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

js
水印