ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery に基づいたアニメーション効果を備えたクールなポップアップ ダイアログの実装 (ソース コードのダウンロード付き)_jquery
これは、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?", { title: "Confirm Dialog Box", animateIn : "bounceInDown", animateOut: "bounceOutUp" }); }); </script>
上記は、エディターによって導入された、jQuery に基づくアニメーション効果を備えたクールなポップアップ ダイアログ ボックスです (ソース コードのダウンロードが含まれています)。皆さんの参考になれば幸いです。