1 \u6982\u8ff0
\n1.1 \u5b9a\u4e49<\/p>\n
\u5728\u4e00\u4e9bB\/S\u7ed3\u6784\u7684\u5e94\u7528\u7cfb\u7edf\u4e2d\uff0c\u6709\u5f88\u591a\u9875\u9762\u662f\u9700\u8981\u6709\u6c34\u5370\u7684\u3002\u5e38\u89c1\u7684\u5c31\u662f\u516c\u6587\u7cfb\u7edf\u3001\u5408\u540c\u7cfb\u7edf\u7b49\u3002\u5927\u5bb6\u5e38\u5e38\u5173\u6ce8\u7684\u662f\u7f51\u7ad9\u56fe\u7247\u589e\u52a0\u6c34\u5370\uff0c\u800c\u5f88\u5c11\u5173\u6ce8\u9875\u9762\u6c34\u5370\u3002\u521a\u53bbGoogle\u4e86\u4e00\u5708\uff0c\u5173\u4e8e\u9875\u9762\u6c34\u5370\u7684\u6587\u7ae0\u7684\u6570\u91cf\u4e3a\u51e0\u4e4e\u4e3a0. \u672c\u6587\u4e2d\uff0c\u6d41\u725b\u6728\u9a6c\u5c31\u4e0e\u5927\u5bb6\u4e00\u8d77\u4ea4\u6d41\u4e00\u4e0b\u6709\u5173\u5236\u4f5c\u7f51\u9875\u6c34\u5370\u7684\u5fc3\u5f97\u3002<\/p>\n
\u672c\u6587\u8ba8\u8bba\u4ee5\u4e0b\u7684\u60c5\u5f62\uff1a \u65b0\u589e\u6c34\u5370\u7684\u65b9\u6cd5\u9700\u8981\u7528Javascript\u5b8c\u6210\uff0c\u5e76\u8981\u6c42\u80fd\u591f\u65b9\u4fbf\u5730\u52a0\u5165\u5230\u539f\u6709\u7684\u9875\u9762\u4e2d\uff0c\u4e0d\u80fd\u5f71\u54cd\u5230\u5df2\u6709\u7684\u529f\u80fd\u3002<\/p>\n
1.2 \u9884\u671f\u76ee\u6807<\/p>\n
\u5c31\u56fe\u7247\u6c34\u5370\u5b9e\u73b0\u65b9\u6848\u6765\u8bf4\uff0c\u6211\u4eec\u9884\u671f\u81f3\u5c11\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u76ee\u6807\uff1a<\/p>\n
1. \u5b9e\u73b0\u60ac\u6d6e\u3001\u534a\u900f\u660e\u7684\u56fe\u7247\u6c34\u5370<\/p>\n
2. \u5305\u542b\u6c34\u5370\u7684\u9875\u9762\uff0c\u6240\u6709\u5143\u7d20\u5747\u4e3a\u53ea\u8bfb(\u4e0d\u53ef\u5199)<\/p>\n
3. \u5728\u5305\u542b\u6846\u67b6\u9875\u9762\u4e2d\uff0c\u53ef\u4ee5\u63a7\u5236\u4efb\u610f\u4e00\u4e2a\u5b50\u9875\u9762\u6216\u7236\u9875\u9762\u7684\u6c34\u5370\u751f\u6210<\/p>\n
4. \u5728\u9875\u9762\u653e\u5927\u3001\u7f29\u5c0f(resize\u8fc7\u7a0b)\u540e\uff0c\u9700\u8981\u5728\u4fdd\u8bc1\u9875\u9762\u4e0d\u5237\u65b0\u7684\u524d\u63d0\u4e0b\uff0c\u91cd\u65b0\u751f\u6210\u9002\u5e94\u9875\u9762\u5927\u5c0f\u7684\u65b0\u6c34\u5370\uff0c\u4ee5\u4fdd\u8bc1\u6240\u6709\u5185\u5bb9\u90fd\u88ab\u6c34\u5370\u8986\u76d6\uff0c\u5e76\u4e14\u4e0d\u4f1a\u56e0\u6c34\u5370\u56fe\u7247\u8303\u56f4\u8fc7\u5927\u800c\u4ea7\u751f\u6eda\u52a8\u6761\u3002<\/p>\n
5. \u652f\u6301IE6\\7\\8\u6d4f\u89c8\u5668\u3002\u6682\u4e0d\u8003\u8651\u5176\u4ed6\u6d4f\u89c8\u5668\u3002<\/p>\n
1.3 \u6548\u679c\u56fe<\/p>\n
\u52a0\u5bc6\u524d\uff1a<\/p>\n
<\/p>\n
\u52a0\u5bc6\u540e\uff1a<\/p>\n
<\/p>\n
\u53ef\u4ee5\u6253\u5f00\u9644\u4ef6\u91cc\u7684\u6587\u4ef6\u8fdb\u884c\u67e5\u770b\u3002<\/p>\n
2 \u5b9e\u73b0\u6b65\u9aa4
\n2.1 \u57fa\u672c\u6784\u601d<\/p>\n
\u52a0\u5bc6\u7684\u8fc7\u7a0b\u662f\u4e00\u4e2aJavascript\u51fd\u6570\u6267\u884c\u8fc7\u7a0b\uff0c\u6240\u4ee5\u6211\u4eec\u9996\u5148\u5e94\u8be5\u8003\u8651\u7528Javascript\u64cd\u4f5cDOM\u5bf9\u8c61\u7684\u65b9\u5f0f\u3002<\/p>\n
\u5728\u5df2\u6709\u7684HTML\u9875\u9762\u4e2d\uff0c\u65b0\u5efa\u4e00\u4e2aDOM\u5bf9\u8c61\u5728Body\u8282\u70b9\u4e0b\u3002\u8be5\u5bf9\u8c61\u7684\u957f\u3001\u5bbd\u5747\u7ecf\u8fc7\u8ba1\u7b97\uff0c\u4fdd\u8bc1\u5728\u8986\u76d6\u5168\u90e8\u9875\u9762\u5185\u5bb9\u7684\u540c\u65f6\u53c8\u4e0d\u4ea7\u751f\u6eda\u52a8\u6761\u3002\u5c06\u8be5\u5bf9\u8c61\u8986\u76d6\u5230\u539f\u6709\u7684\u9875\u9762\u4e4b\u4e0a\uff0c\u8bbe\u7f6e\u80cc\u666f\u56fe\uff0c\u5e76\u8bbe\u7f6e\u4e3a\u900f\u660e\u3002<\/p>\n
\u521b\u5efa\u65b0DOM\u5143\u7d20\uff1a<\/p>\n
\u4f7f\u7528document\u5bf9\u8c61\u91cc\u7684createElement\u65b9\u6cd5\u3002\u521b\u5efa\u5143\u7d20\u540e\uff0c\u8bbe\u7f6e\u5b83\u7684z-index\u4e3a\u4e00\u4e2a\u5927\u6574\u6570\uff0c\u4fdd\u8bc1\u5b83\u80fd\u591f\u6bd4\u5df2\u6709\u7f51\u9875\u7684\u6700\u5927z-index\u5927\uff0c\u624d\u80fd\u5b8c\u6210“\u8986\u76d6”\u3002<\/p>\n
\u8ba1\u7b97\u65b0\u5bf9\u8c61\u5927\u5c0f\uff1a<\/p>\n
\u5229\u7528\u4e09\u4e2aDOM\u5bf9\u8c61\u503c\uff1a clientWidth \u3001scrollHeight\u4e0eclientHeight.<\/p>\n
\u7f51\u9875\u4e2d\u4e00\u822c\u4e0d\u4f1a\u51fa\u73b0\u6a2a\u5411\u6eda\u52a8\u6761\uff0c\u6545\u4e0d\u4f7f\u7528scrollWidth.<\/p>\n
\u800c\u7eb5\u5411\u7684\u6eda\u52a8\u6761\u5c31\u5f88\u5e38\u89c1\u4e86\u3002<\/p>\n
\u4e3a\u4e86\u4fdd\u8bc1\u9875\u9762\u5185\u5bb9\u5168\u90e8\u8986\u76d6\uff0c\u5728\u672a\u51fa\u73b0\u6eda\u52a8\u6761\u7684\u65f6\u5019\uff0c\u4f7f\u7528clientHeight\uff0c\u51fa\u73b0\u6eda\u52a8\u6761\u540e\uff0c\u5219\u4f7f\u7528scrollHeight\u3002<\/p>\n
\n\u8bbe\u7f6e\u900f\u660e\uff1a<\/p>\n
\u5229\u7528Alpha\u503c\u3002Alpha\u662fIE\u652f\u6301\u7684css filter\u3002<\/p>\n
2.2 \u5e94\u53d8\u7ec6\u8282<\/p>\n
\u6709\u4e00\u4e2a\u5c0f\u7ec6\u8282\u662f\u5f88\u6709\u610f\u601d\u7684\uff0c\u524d\u6587\u4e5f\u63d0\u8fc7\u4e86\uff0c\u5c31\u662fresize\u7684\u8fc7\u7a0b\u3002<\/p>\n
\u8bd5\u60f3\uff0c\u5f53\u4e00\u4e2a\u9875\u9762\u6253\u5f00\u7684\u65f6\u5019\u662f550px×400px\uff0c\u90a3\u4e48\u81ea\u7136\u4f1a\u751f\u6210550px×400px\u5927\u5c0f\u7684\u6c34\u5370\u3002\u4f46\u5f53\u7528\u6237\u5bf9\u5b83\u8fdb\u884c\u6700\u5927\u5316\u65f6\uff0c\u9875\u9762\u6ca1\u6709\u5237\u65b0\uff0c\u4e0d\u4f1a\u91cd\u65b0\u6267\u884c\u751f\u6210\u6c34\u5370\u7684\u51fd\u6570\uff0c\u90a3\u4e48\u4ee5\u524d\u751f\u4ea7\u7684\u6c34\u5370\u56fe\u7247\u5c31\u592a\u5c0f\u4e86\u3002<\/p>\n
\u5982\u4e0b\u56fe\u6240\u793a\u7684\u60c5\u51b5\u3002\u8bf7\u6ce8\u610f\uff0c\u5b83\u7684\u53f3\u4fa7\u3001\u4e0b\u4fa7\u90fd\u662f\u6ca1\u6709\u6c34\u5370\u7684\u3002<\/p>\n
<\/p>\n
\u4e3a\u4e86\u5e94\u5bf9\u8fd9\u79cd\u60c5\u51b5\uff0c\u6211\u4eec\u5c31\u9700\u8981\u5bf9body\u7684onresize()\u51fd\u6570\u8fdb\u884c\u5904\u7406\u3002\u5982\u679c\u4ee5\u524d\u5b9a\u4e49\u6ca1\u6709onresize()\u51fd\u6570\uff0c\u5219\u76f4\u63a5\u6dfb\u52a0onresize()\uff1b\u5982\u679c\u4ee5\u524d\u6709onresize()\u51fd\u6570\uff0c\u5219\u5bf9\u4e4b\u8fdb\u884c\u4fee\u6539\u3002<\/p>\n
2.3 \u6700\u7ec8\u4ee3\u7801<\/p>\n
\u8003\u8651\u5230\u6846\u67b6\u9875\u9762\u9700\u8981\u8003\u8651\u7684\u60c5\u51b5\uff0c\u8be5\u65b9\u6cd5\u5305\u62ec\u4e09\u4e2a\u53c2\u6570\uff1a \u76ee\u6807\u9875\u9762\u5bf9\u8c61\u3001\u76ee\u6807\u9875\u9762\u5b57\u7b26\u4e32\u3001 \u80cc\u666f\u56fe\u7247\u3002<\/p>\n
function GetWaterMarked(targetObj,jpgUrl,targetStr ) {<\/p>\n
var windowobj=targetObj;<\/p>\n
var waterMarkPicUrl=jpgUrl;<\/p>\n
var controlWindowStr=targetStr;<\/p>\n
if(windowobj.document.getElementById("waterMark") != null)<\/p>\n
return;<\/p>\n
var m = "waterMark";<\/p>\n
var newMark = windowobj.document.createElement("div");<\/p>\n
newMark.id = m;<\/p>\n
newMark.style.position = "absolute";<\/p>\n
newMark.style.zIndex = "9527";<\/p>\n
newMark.style.top = "0px";<\/p>\n
newMark.style.left = "0px";<\/p>\n
newMark.style.width = windowobj.document.body.clientWidth;<\/p>\n
if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) )<\/p>\n
{<\/p>\n
newMark.style.height = windowobj.document.body.scrollHeight;<\/p>\n
}else<\/p>\n
{<\/p>\n
newMark.style.height = windowobj.document.body.clientHeight;<\/p>\n
}<\/p>\n
newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";<\/p>\n
newMark.style.filter = "alpha(opacity=50)";<\/p>\n
windowobj.document.body.appendChild(newMark);<\/p>\n
var markStr = "var sobj ="+controlWindowStr+".document.getElementById(‘waterMark’);sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;";<\/p>\n
if(windowobj.document.body.onresize != null)<\/p>\n
{<\/p>\n
var oldResiae = windowobj.document.body.onresize.toString();<\/p>\n
var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1);<\/p>\n
var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}"));<\/p>\n
oldResiaeStr+=";"+markStr;<\/p>\n
windowobj.document.body.onresize = new Function(oldResiaeStr);<\/p>\n
}<\/p>\n
else<\/p>\n
{<\/p>\n
windowobj.document.body.onresize = new Function(markStr);<\/p>\n
}<\/p>\n
}<\/p>\n
3 \u539f\u6709\u9875\u9762\u5904\u7406
\n\u9700\u8981\u5728\u539f\u6709\u7684<body>\u6807\u7b7e\u5904\u52a0\u5165\u4e00\u4e2aonload\u65b9\u6cd5\u3002\u5982\uff1a<\/p>\n
<body onload="GetWaterMarked(window,’watermark.jpg’,’this’)"><\/p>\n
4 \u9644\u4ef6
\nhttp:\/\/files.cnblogs.com\/azure\/%E6%B0%B4%E5%8D%B0.rar<\/p>\n
<\/p>\n
_________________________________________________________________________________<\/p>\n
\u5173\u4e8e\u6269\u5c55\u5230\u975eIE\u6d4f\u89c8\u5668\uff1a<\/p>\n
\u6709\u5f88\u591a\u670b\u53cb\u95ee\u8d77\u5982\u4f55\u6269\u5c55\u5230\u975eIE\u6d4f\u89c8\u5668\u3002<\/p>\n
\u6211\u6587\u4e2d\u6709\u63d0\u5230\u8bbe\u7f6e\u6c34\u5370\u56fe\u7247\u900f\u660e\u7684\u65b9\u5f0f\uff0c\u90a3\u662f\u4e00\u79cd\u4ec5\u9002\u7528\u4e8eIE\u7684\u65b9\u5f0f\u3002\u8981\u5728\u5176\u4ed6\u6d4f\u89c8\u5668\u4e2d\u7684\u8bbe\u7f6e\u56fe\u7247\u900f\u660e\uff0c\u4e5f\u662f\u5f88\u5bb9\u6613\u7684\u3002 \u6211\u8fd8\u6ca1\u6709\u505a\u6d4b\u8bd5\uff0c\u8bf7\u5404\u4f4d\u770b\u5b98\u81ea\u884c\u53c2\u8003\u8fd9\u7bc7\u5e16\u5b50\uff1a<\/p>\n