ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery に基づいたアニメーション効果を備えたクールなポップアップ ダイアログの実装 (ソース コードのダウンロード付き)_jquery

jQuery に基づいたアニメーション効果を備えたクールなポップアップ ダイアログの実装 (ソース コードのダウンロード付き)_jquery

WBOY
WBOYオリジナル
2016-05-16 15:14:131624ブラウズ

これは、jQuery ベースのポップアップ ダイアログ プラグインです。この jQuery ダイアログ プラグインの最大の特徴は、ポップアップと閉じるの両方に、回転や飛行などの非常にクールなアニメーション効果があることです。ダウンジッターやフライングインなど。レンダリングは次のとおりです:


効果デモ ソースコードダウンロード

html コード:

<div class="container">
<h1>jQuery gDialog Plugin Exampels</h1>
<button class="btn demo-1">Alert Dialog Box</button>
<button class="btn demo-2">Prompt Dialog Box</button>
<button class="btn demo-3">Prompt Dialog Box</button>
</div>
<script src="src/jquery.js"></script>
<script src="src/jquery.gDialog.js"></script>
<script>
$('.demo-1').click(function(){
$.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", {
title: "Alert Dialog Box",
animateIn: "bounceIn",
animateOut: "bounceOut"
});
}); 
$('.demo-2').click(function(){
$.gDialog.prompt("脚本之家", <a href="http://www.jb51.net">www.jb51.net</a>, {
title: "Prompt Dialog Box",
required: true,
animateIn : "rollIn",
animateOut: "rollOut"
});
}); 
$('.demo-3').click(function(){
$.gDialog.confirm("Are You Sure&#63;", {
title: "Confirm Dialog Box",
animateIn : "bounceInDown",
animateOut: "bounceOutUp"
});
}); 
</script>

上記は、エディターによって導入された、jQuery に基づくアニメーション効果を備えたクールなポップアップ ダイアログ ボックスです (ソース コードのダウンロードが含まれています)。皆さんの参考になれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。