<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイル>
#userName {
幅：350px;
高さ：100pxに。
}
</スタイル>
</ head>の
<身体>
<DIV ID = "userNameに">
あなたはすべての透かしを追加する必要がある場合は、この提案箱に包ま
</ div>
<スクリプトSRC = "jqueryの-1.12.4.js"> </ SCRIPT> //あなたのjQueryのパスを導入することを忘れないでください
<スクリプト>
関数透かし（設定）{
//デフォルト設定
VaRのdefaultSettings = {
watermark_txt： "テキスト"、
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：「15ピクセル」、//透かしのフォントサイズ
watermark_font：「マイクロソフトエレガントな黒」、//透かしフォント
watermark_width：180、//幅透かし
watermark_height：100、//長透かし
watermark_angle：傾斜透かしの15 //数
}。
//使用の設定項目は、デフォルト値、同様の役割jquery.extendを上書きします
IF（arguments.lengthを=== 1 && typeof演算引数[0] === "オブジェクト"）{
VARのSRC =引数[0] || {};
{（SRCでキー）のために
IF（SRC [キー] && defaultSettings [キー] && SRC [キー] === defaultSettings [キー]）
持続する;
それ以外の場合（SRC [キー]）
defaultSettings [キー] = SRC [キー]。
}
}
VAR oTemp = document.createDocumentFragment（）。
//ページの最大幅を取得します。
VaRのpage_width = Math.max（document.body.scrollWidth、document.body.clientWidth）。
VAR cutWidth = page_width * 0.0150;
VAR page_width = page_width - cutWidth。
//ページの最大の高さを取得します。
VaRのpage_height = Math.max（document.body.scrollHeight、document.body.clientHeight）+ 450。
// VAR page_height = document.body.scrollHeight + document.body.scrollTop。
ウォーターマークの列の数が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;
以下のために（; I <defaultSettings.watermark_rows; VAR iが0 = I ++）{
Y = defaultSettings.watermark_y +（defaultSettings.watermark_y_space + defaultSettings.watermark_height）* I。
{（J ++; J <defaultSettings.watermark_colsするvar J = 0）のための
X = defaultSettings.watermark_x +（defaultSettings.watermark_width + defaultSettings.watermark_x_space）* J。
VAR mask_div =のdocument.createElement（ 'DIV'）;
mask_div.id = 'mask_div' + I + J;
mask_div.className = 'mask_div';
mask_div.appendChild（document.createTextNode（defaultSettings.watermark_txt））。
ウォーターマークのdivチルト表示を設定する//
mask_div.style.webkitTransform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.MozTransform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.msTransform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.OTransform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.transform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.visibility = "";
mask_div.style.position =「絶対」。
mask_div.style.left = X + 'ピクセル'。
mask_div.style.top = Y + 'ピクセル';
mask_div.style.overflow = "隠されました";
mask_div.style.zIndex = "9999";
mask_div.style.pointerEvents =「なし」; //ポインタイベント：なしのletウォーターマークがページのクリックイベントを隠しません
//mask_div.style.border="solid #eee 1pxの ";
mask_div.style.opacity = defaultSettings.watermark_alpha。
mask_div.style.fontSize = defaultSettings.watermark_fontsize。
mask_div.style.fontFamily = defaultSettings.watermark_font。
mask_div.style.color = defaultSettings.watermark_color。
mask_div.style.textAlign =「センター」。
mask_div.style.width = defaultSettings.watermark_width + 'ピクセル';
mask_div.style.height = defaultSettings.watermark_height + 'ピクセル';
mask_div.style.display =「ブロック」。
oTemp.appendChild（mask_div）。
}。
}。
document.body.appendChild（oTemp）。
}
VARのuserName = $（ '＃userNameを'）。valを（）
透かし（{watermark_txt：+ userNameの「背景透かしに追加するコンテンツ」}）
</ SCRIPT>
</ BODY>
</ HTML>