jquery_jqueryに基づく美しい動的な情報プロンプト効果を実現

シンプル、美しい、アニメーション効果、優れたユーザーエクスペリエンス!

このエフェクトはページの先頭に表示されます。x プロンプトがある場合は、それを手動で閉じる必要があります。

注意: jquery 1.6.2 バージョンに基づいています。

コードをコピー コードは次のとおりです:

;

メソッドの呼び出し:

コードをコピー コードは次のとおりです:

> ;


jquery バージョン:

コードをコピー コードは次のとおりです。

/*!

* jQuery JavaScript SysMsg v1.0
* http://zengxiangzhan.cnblogs.com/
* jQuery.sysmsg.js
* 著作権2011 年、曽祥章
* 日付: 2011-8-1 20:00 2011 -2210
*/
if (!window.ZENG) var ZENG = {}; (d, f) {
var j;
if ($.isFunction(f.init)) {
j = f.init;
$.extend; (true, j.prototype, f);
this[d] = j
} else this[d] = f
};
関数 d(u , D, v) {
D || (D = "成功");
v = "エラー";
h.push( function() {
d(u, D)
});
f()
} else {
m.html(u); >i.removeClass().addClass(D).show().animate({
top: 0
}, 200, function() {
v || j()
}) ;
o = 1
}
}
function f() {
i.animate({
top: "-50px"
}, 200, function() {
i.hide ();
o = 0;
h.length && h.shift()()
})
}
関数 j() {
setTimeout(function() {
f()
}, 2E3)
}
var o, h = [],
i = $("#message-dock"),
m = i. find("#message-text");
$(".dismiss", "#message-dock").live("click", function(u) {
f ();
u .preventDefault()
});
show: d
}
}());スタイル




コードをコピー


コードは次のとおりです:

.group {
表示: ブロック;
}
.group:after {
clear: 両方;
内容: ".";
表示: ブロック;
高さ: 0;
可視性: 非表示。
}
.group {
最小高さ: 1%;
}
* html .group {
高さ: 1%;
}
html, body, div,p{
背景: なし スクロールを繰り返す 0 0 透明;
ボーダー: 0 なし;
フォントサイズ: 100%;
マージン: 0;
概要: 0 なし。
vertical-align: ベースライン;
}
ボディ {
色: #444444;
フォントファミリー: "Helvetica Neue"、Helvetica、Arial、サンセリフ;
フォントサイズ: 75%;
行の高さ: 1;
}
#message-dock {
背景色: #164673;
色: #FFFFFF;
行の高さ: 1.75em;
パディング: 10px;
位置: 固定;
トップ: -60px;
幅: 100%;
z インデックス: 9999;
}
#message-dock a {
色: #FFFFFF;
フォントの太さ: 太字;
テキスト装飾: 下線;
}
#message-dock p {
border-radius: 5px 5px 5px 5px;
フロート: 左;
パディング: 5px 6px;
}
#message-dock .dismiss {
background: url("msg.png") 繰り返しスクロール -67px -180px #A12A2A;
境界半径: 0 5px 5px 0;
表示: なし。
フロート: 左;
高さ: 21px;
パディング左: 10px;
テキストインデント: -999999px;
幅: 20px;
カーソル: ポインタ;
}
.sprite {
背景: url("msg.png") 繰り返しなしのスクロール 0 0 透明;
表示: インラインブロック;
vertical-align: 上;
}
#message-sleeve {
マージン: 0 自動;
最大幅: 1200px;
最小幅: 1000px;
}
.fixed #message-sleeve {
幅: 1000px;
}
#message-text {
float: left;
フォントサイズ: 1.16667em;
パディング: 0 10px 0 0;
}
.success p {
背景色: #7AA13D;
}
.alert p {
背景色: #FFF095;
カラー: #333333;
}
.alert a {
色: #333333 !重要;
}
.error p {
背景色: #A12A2A;
右パディング: 0 !重要;
}
.error #message-text {
padding-right: 0;
}
.error .dismiss {
表示: ブロック !重要;
}
.error .message-icon, .alert .message-icon {
background-position: 0 -249px;
}
.message-icon {
背景位置: -21px -249px;
フロート: 左;
高さ: 21px;
右マージン: 6px;
位置: 相対。
幅: 21px;
}

付属品：

完毕！