クリックポップアップレイヤーを実現するjqueryの簡単な例effect

クリックポップアップレイヤーを実現するjqueryの簡単な例effect_jquery

WBOY

リリース： 2016-05-16 16:57:44

オリジナル

1174 人が閲覧しました

ポップアップレイヤーの実際の応用では、多くのポップアップレイヤー効果に遭遇することがよくあります。以下に jquery に基づいた簡単なポップアップレイヤー効果の例を作成します。興味のある方は参考にしてください。

エフェクトコードは次のとおりです:

以下はポップアップレイヤーのコアコードです

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

< ;script type="text/javascript">
//グラデーションポップアップレイヤー
$(document).ready(function(){
 varspeed = 600;//アニメーションSpeed
 $( "#race a").click(function(event){//バインド イベント処理
event.stopPropagation();
 var offset = $(event.target).offset() ;//イベント Bubble
 をキャンセル $("#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) } );//クリックするとポップアップします レイヤー自体が非表示になります

});