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

WBOY
リリース: 2016-05-16 16:13:18
オリジナル
921 人が閲覧しました

この記事の例では、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 プログラミングに役立つことを願っています。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!