シンプル、美しい、アニメーション効果、優れたユーザーエクスペリエンス! このエフェクトはページの先頭に表示されます。x プロンプトがある場合は、それを手動で閉じる必要があります。 注意: jquery 1.6.2 バージョンに基づいています。 コードをコピー コードは次のとおりです: <スパン ID= "メッセージテキスト"> ; メソッドの呼び出し: コードをコピー コードは次のとおりです: show('メール形式エラー ! ', "エラー"); <br>ZENG.SysMsg.show('もう一度お試しください!', "アラート"); <br>ZENG.SysMsg.show('正常に保存されました!') ;</script> ; <br><br> <br>jquery バージョン: </div> <br><br><div class="codetitle"> <span> コードをコピー <a style="CURSOR: pointer" data="21463" class="copybut" id="copybut21463" onclick="doCopy('code21463')"><u></u> コードは次のとおりです。 </a></span> </div>/*! <div class="codebody" id="code21463">* jQuery JavaScript SysMsg v1.0 <br>* http://zengxiangzhan.cnblogs.com/ <br>* jQuery.sysmsg.js <br>* 著作権2011 年、曽祥章<br> * 日付: 2011-8-1 20:00 2011 -2210 <br>*/ <br>if (!window.ZENG) var ZENG = {}; (d, f) { <br>var j; <br>if ($.isFunction(f.init)) { <br>j = f.init; <br>$.extend; (true, j.prototype, f); <br>this[d] = j <br>} else this[d] = f <br>}; <br>関数 d(u , D, v) { <br>D || (D = "成功"); <br>v = "エラー"; <br>h.push( function() { <br>d(u, D) <br>}); <br>f() <br>} else { <br>m.html(u); >i.removeClass().addClass(D).show().animate({ <br>top: 0 <br>}, 200, function() { <br>v || j() <br>}) ; <br>o = 1 <br>} <br>} <br>function f() { <br>i.animate({ <br>top: "-50px" <br>}, 200, function() { <br>i.hide (); <br>o = 0; <br>h.length && h.shift()() <br>}) <br>} <br>関数 j() { <br>setTimeout(function() { <br>f() <br>}, 2E3) <br>} <br>var o, h = [], <br>i = $("#message-dock"), <br>m = i. find("#message-text"); <br>$(".dismiss", "#message-dock").live("click", function(u) { <br>f (); <br>u .preventDefault() <br>}); <br>show: d <br>} <br>}());スタイル<br><br> <br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code60984"> <br>.group { <br>表示: ブロック; <br>} <br>.group:after { <br>clear: 両方; <br>内容: "."; <br>表示: ブロック; <br>高さ: 0; <br>可視性: 非表示。 <br>} <br>.group { <br>最小高さ: 1%; <br>} <br>* html .group { <br>高さ: 1%; <br>} <br>html, body, div,p{ <br>背景: なし スクロールを繰り返す 0 0 透明; <br>ボーダー: 0 なし; <br>フォントサイズ: 100%; <br>マージン: 0; <br>概要: 0 なし。 <br>vertical-align: ベースライン; <br>} <br>ボディ { <br>色: #444444; <br>フォントファミリー: "Helvetica Neue"、Helvetica、Arial、サンセリフ; <br>フォントサイズ: 75%; <br>行の高さ: 1; <br>} <br>#message-dock { <br>背景色: #164673; <br>色: #FFFFFF; <br>行の高さ: 1.75em; <br>パディング: 10px; <br>位置: 固定; <br>トップ: -60px; <br>幅: 100%; <br>z インデックス: 9999; <br>} <br>#message-dock a { <br>色: #FFFFFF; <br>フォントの太さ: 太字; <br>テキスト装飾: 下線; <br>} <br>#message-dock p { <br>border-radius: 5px 5px 5px 5px; <br>フロート: 左; <br>パディング: 5px 6px; <br>} <br>#message-dock .dismiss { <br>background: url("msg.png") 繰り返しスクロール -67px -180px #A12A2A; <br>境界半径: 0 5px 5px 0; <br>表示: なし。 <br>フロート: 左; <br>高さ: 21px; <br>パディング左: 10px; <br>テキストインデント: -999999px; <br>幅: 20px; <br>カーソル: ポインタ; <br>} <br>.sprite { <br>背景: url("msg.png") 繰り返しなしのスクロール 0 0 透明; <br>表示: インラインブロック; <br>vertical-align: 上; <br>} <br>#message-sleeve { <br>マージン: 0 自動; <br>最大幅: 1200px; <br>最小幅: 1000px; <br>} <br>.fixed #message-sleeve { <br>幅: 1000px; <br>} <br>#message-text { <br>float: left; <br>フォントサイズ: 1.16667em; <br>パディング: 0 10px 0 0; <br>} <br>.success p { <br>背景色: #7AA13D; <br>} <br>.alert p { <br>背景色: #FFF095; <br>カラー: #333333; <br>} <br>.alert a { <br>色: #333333 !重要; <br>} <br>.error p { <br>背景色: #A12A2A; <br>右パディング: 0 !重要; <br>} <br>.error #message-text { <br>padding-right: 0; <br>} <br>.error .dismiss { <br>表示: ブロック !重要; <br>} <br>.error .message-icon, .alert .message-icon { <br>background-position: 0 -249px; <br>} <br>.message-icon { <br>背景位置: -21px -249px; <br>フロート: 左; <br>高さ: 21px; <br>右マージン: 6px; <br>位置: 相対。 <br>幅: 21px; <br>} <br> </div> <br>付属品： <br><br><img title="曾祥展" style="max-width:90%" style="max-width:90%" alt="曾祥展" src="http://files.jb51.net/upload/201108/20110802224841958.png" style="max-width:90%" border="0"> <p><br>完毕！</p> </div>
