jQuery_jqueryを使用してグラデーションポップアップレイヤーとポップアップメニューを実装する方法

この記事の例では、jQuery がグラデーション ポップアップ レイヤーとポップアップ メニューを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

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

<頭>


<スタイル>
/* グラデーションポップアップレイヤー */
本文{font-size:9pt;}
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1pxソリッド;}
.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}
#UpLayer スパン{ボーダー:#fff 1px; パディング:0 5px; 表示:ブロック;}
#UpLayer ul{表示:なし;位置:絶対;ボーダー:#ccc 1px;幅:80px;行の高さ:20px;背景:#f1f1f1;}
#UpLayer ul li{ border-bottom:#ccc 1px 破線;}



<スクリプトタイプ="text/javascript">
// グラデーションポップアップレイヤー
$(document).ready(function(){
varspeed = 600;//アニメーション速度
$("#race a").click(function(event){//バインディング イベント処理
イベント.stopPropagation();
var offset = $(event.target).offset();//イベントバブリングをキャンセル
$("#racePop").css({ top:offset.top $(event.target).height() "px", left:offset.left });//ポップアップレイヤーの位置を設定します
$("#racePop").show(speed);//アニメーション表示
});
$(document).click(function(event) { $("#racePop").hide(speed) });//非表示にする空白領域をクリックします
$("#racePop").click(function(event) { $("#racePop").hide(speed) });//ポップアップ レイヤーをクリックして非表示にします
var objStr = "#UpLayer";
$(objStr).mouseover(function(){$(objStr " ul").show();});
$(objStr).mouseout(function(){$(objStr " ul").hide();});
});

クリック

ポップアップ レイヤー効果は次のとおりです

ポップアップレイヤー

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

この記事が皆さんの jQuery プログラミングに役立つことを願っています。