jquery_jqueryに基づく美しい動的な情報プロンプト効果を実現
シンプル、美しい、アニメーション効果、優れたユーザーエクスペリエンス!
このエフェクトはページの先頭に表示されます。x プロンプトがある場合は、それを手動で閉じる必要があります。
注意: jquery 1.6.2 バージョンに基づいています。
メソッドの呼び出し:
jquery バージョン:
* 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;
}
付属品:

完毕!

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML、CSS、および jQuery を使用して動的効果のある検索ボックスを作成する方法 最新の Web 開発では、動的効果のある検索ボックスを作成することが一般的なニーズです。この検索ボックスには、リアルタイムで検索候補が表示され、ユーザーが入力するとキーワードが自動的に完成します。この記事ではそんな検索ボックスをHTML、CSS、jQueryを使って実装する方法を詳しく紹介します。 HTML 構造の作成 まず、基本的な HTML 構造を作成する必要があります。コードは次のとおりです: <!DOCT

仕事で PPT を使用することがよくあります。PPT を退屈にせず、より美しくしたい場合があります。多くの人が PPT に動的な効果を追加して、スピーチをしているときに全員が PPT に注目するようにします。退屈ではありませんが、ppt のダイナミックな効果を作成するにはどうすればよいでしょうか? 今度はその手順を友達と共有します。 1. まず、コンピューター上で PPT を開き、メニューバーの [挿入] ボタンをクリックし、[画像] ボタンをクリックしてコンピューター上の画像を選択し、赤丸で示すように PPT に挿入します。 2.次に、ツールバーの[アニメーション]機能をクリックし、下図の赤丸で示すように、お好みのスタイルをクリックします。 3.次に、効果オプションで、次のことができます。選択する

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション フレームワークで、Vue コードをミニ プログラム、アプリ、H5 などのさまざまなプラットフォームのネイティブ コードに変換できます。開発者が機能豊富なアプリケーションを迅速に構築できるように、豊富なコンポーネントとプラグインが提供されています。この記事では、UniAppを使ってダイナミックエフェクトやアニメーション表示を実現するための設計・開発方法と、対応するコード例を紹介します。 CSS を使用したアニメーション UniApp は、CSS3 を使用したトランジションとアニメーションをサポートしています

Canvas テクノロジを簡単にマスターし、クールなダイナミック エフェクトを作成する Canvas は、さまざまなクールなダイナミック エフェクトを実現できる HTML5 の強力な描画テクノロジです。この記事では、Canvas の基本的な使用法を段階的に学習し、このテクノロジを簡単に習得できるように具体的なコード例を示します。 1. Canvas の概要 Canvas は HTML5 の要素であり、Web ページ上にグラフィック、アニメーション、その他のコンテンツを描画するために使用されます。各種APIを利用することで、Canvas上にグラフィックを描画したり、アニメーションを追加したりすることができます。

JavaScript 関数を使用してユーザー インタラクションと動的な効果を実現する 最新の Web デザインの発展に伴い、ユーザー インタラクションと動的な効果がユーザーの注目を集める鍵となっています。一般的に使用されるスクリプト言語として、JavaScript は強力な機能と柔軟な機能を備えており、さまざまなユーザー インタラクションや動的な効果を実現できます。この記事では、いくつかの一般的な JavaScript 関数を紹介し、具体的なコード例を示します。要素のスタイル(スタイル)の変更はJavaScript関数で簡単に変更可能

JavaScript 関数を使用してユーザー インターフェイスで動的な効果を実現する 現在の Web 開発では、JavaScript が非常に一般的に使用されるプログラミング言語であり、Web ページに動的な効果を追加し、ユーザー エクスペリエンスを向上させることができます。この記事では、JavaScript 関数を使用してユーザー インターフェイスで動的な効果を実現する方法を紹介し、具体的なコード例を示します。要素の表示/非表示 多くの場合、ユーザーのアクションに基づいて一部の要素を表示または非表示にできるようにしたいと考えられます。 JavaScript 関数を使用してこれを実現できます

Canvas テクノロジでは、動的な効果を実現し、豪華なビジュアル世界を探索するために、特定のコード サンプルが必要です。近年、インターネットとモバイル デバイスの急速な発展に伴い、Web デザインは従来の静的な表示方法に限定されなくなりました。ますます多くの Web デザイナーが、ユーザーの注意を引くために動的で鮮やかなページ効果を追求し始めています。 Canvas テクノロジーは、この目標を達成するための強力なツールです。この記事では、Canvas テクノロジの基本原理と一般的な動的効果を紹介し、参考として具体的なコード例を示します。キャンバスはHです

JavaScript はどのようにして Web ページ上で動的な効果を実現するのでしょうか? JavaScript は、Web ページをより鮮やかでインタラクティブにするフロントエンド開発言語です。開発者は JavaScript を使用して、アニメーション、イベント応答などの動的な効果を Web ページに実装できます。以下では、Web ページ上で動的な効果を実現するのに役立つ一般的な JavaScript テクニックをいくつか紹介します。要素スタイルの変更 JavaScript を使用して、色、サイズ、位置などの変更など、Web ページ要素のスタイルを変更できます。以下は、
