jQueryを使用してマスク層のポップアップ効果を作成するごく簡単な例を共有します.

2486 ワード

お客様のサイトには、突然マスク弾窓効果が必要になります.暗箱とも呼ばれます.具体的な効果は、ページの背景が半透明になり、画面の真ん中にメニューが表示されることです.この効果はネット上でよく見られます.例えば、QQ空間でアルバムを閲覧するなどです.この効果の利点は、ユーザーがポップアップメニューにフォーカスできることです.
神は、コードの文章があって、Demoがあるべきだと言って、そこでDemoがありました.
HTML構造
まず、このプロセスを分析します.イベント(ボタンをクリックするなど)をトリガーし、バックグラウンドマスクの上にコンテンツ層が表示されます.トリガーされたボタンは、ここでdivで代用し、clickを使用してイベントをクリックしてプレゼンテーションします.では、私たちのHTML構造は明確です.

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ，一个作为背景，要覆盖整个网页，另一个是内容显示层，通常要居中处理。


.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

簡単に説明すると、まず非表示にしてから、jQueryで表示をトリガします.その後、positionのプロパティをfixedと指定します.これにより、top、left、bottom、right、z-indexなどのプロパティをアクティブにするとともに、width、heightを100%に設定してWebページ全体を上書きすることができます.通常、absoluteプロパティ値は、互換性がより良いため、absoluteプロパティ値で実現されます.しかし,実際の応用では,ページが長く,下にスクロールするとabsoluteマスク層を用いてもスクロールに従う.コンテンツレイヤでは、幅と高さを負の余白で中央に表示するように指定するのが簡単です.特に、背景レイヤの半透明性はopacityプロパティを使用しています.このプロパティを使用すると、jQueryでよりよく制御できるからです.しかしfixed、opacityはいずれも初期のIEブラウザではサポートされていない.
jQueryコード
マスクのインタラクティブな操作を分析すると、クリックしてポップアップし、マスクをクリックして消えることにほかならない.では、CSSを直接操作すればいいです.


 $(function(){
  $(‘.click').click(function(){
   $(‘.bg').css({‘display':'block'});
   $(‘.content').css({‘display':'block'});
  });
  $(‘.bg').click(function(){
   $(‘.bg').css({‘display':'none'});
   $(‘.content').css({‘display':'none'});
  });
 });

ここではCSSメソッドを直接使用し,クリックしたときにdisplay属性を変更するほか,実装方法も多く,後述しない.これらを完了すると、「ここをクリック」をクリックすると、効果が見えます.より多くのテクニックと方法
より緩やかな表示:
クリックすると、突然現れるのは良い方法ではありません.だから私はまたボタンを追加して、クリックした後にfadeIn、fadeOutの方法で漸隠を制御します.


 $(‘.click1').click(function(){
 $(‘.bg').fadeIn(200);
 $(‘.content').fadeIn(400);
 });
 $(‘.bg').click(function(){
 $(‘.bg').fadeOut(800);
 $(‘.content').fadeOut(800);
 });

このような簡単な方法で、ユーザー体験が向上します.もちろん、より高度な効果も実現できます.

サーバ間のsvnバージョンライブラリの移行作業

jqueryを使用して2048ゲームを実現(2)