0

プロットの説明:

  • サイズとプロパティが異なる多数の div があり、それらにはすべてboxクラスがあります。
  • すべてのボックスは で非表示になりdisplay: noneます。
  • これらのボックスは「絶対」位置を持つことはできません。
  • ページが読み込まれると、これらのボックスが 1 つずつ切り替わり始めます。
  • jQuery のトグル効果は要素の左上から始まります。

質問：

トグル効果をボックスの中心 (高さと幅の両方) から開始したい。ボックスのサイズが 100px*100px の場合、効果は上から 50px、左から 50px から開始する必要があります。jQueryでそれを行うにはどうすればよいですか?

4

1 に答える 1

2

あなたが何を意味するかをよく理解していれば、これでうまくいくはずです。

実行例はこちらにあります。

最初にあなたのhtmlを書きます：

<div id="container">
 <div id="link">
     <a href="javascript:void(0)" id="boxOne">Click Me</a>
 </div>
 <div id="boxOneContent" class="box">
     <div class="content">
         <h1>Hello World</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Ut ullamcorper consequat dui tempor euismod.</p>
         <p>Nam vel odio massa, sed lacinia sapien. Cras ac
         nisi.</p>
     </div>
 </div>

リンクの ID は、対応するボックスの ID の最初の部分と一致します。デモでは、コンテナー div に追加したので、ユーザーはページの任意の場所をクリックしてボックスを閉じることができます。ボックス内のコンテンツのコンテナもあり、ボックスが拡張するときにコンテンツがラッピングされるのを防ぎます。

これで、ボックスをリンクの中央に配置する CSS が作成されました。ここでは重要な側面のみを示しています。デモで完全なコードを確認してください。

#link {
float: left;
border: 1px solid red;
text-align: center;

width: 40px;
height: 40px;
padding: 5px;

margin-left: 125px;
margin-top: 125px;
}

#boxOneContent
{
background-color: #000;
color: #fff;

padding: 20px;
width: 160px;
height: 160px;
position: absolute;

top: 150px;
left: 150px;

margin-left: -100px;
margin-top: -100px;

display: none;}

#link の幅、高さ、パディング、およびマージンを定義することにより、この要素の中心は上から 150 ピクセル、左から 150 ピクセルになります。仕組みは次のとおりです: 125+((40+(5*2))/2) = 150.

パディングを含めると、#boxOneContent の幅と高さの合計は 200px になります。したがって、設定されたマージンは、div を上に移動し、ボックスのサイズの半分だけ左に移動します。これは、div が (通常どおり) 右下に拡大しているように見えるときに div を外側に「成長」させるものですが、これらのマージンに到達するために左上にも移動します。

最後に、すべてをまとめた jQuery を次に示します。

$(document).ready(function($) {

    $('a').click(function(){

        if($('.box#'+$(this).attr('id')+'Content').hasClass('active') == true) {
            $('.box#'+$(this).attr('id')+'Content').removeClass('active').hide(200);
        } else {
             $('.box.active').removeClass('active').hide(200);
             $('.box#'+$(this).attr('id')+'Content').addClass('active').show(1000);
        }
     });

     $("body").click(function(){
          $(".box").removeClass("active").hide(200);
     });

     $("a").click(function(e){
          e.stopPropagation();
     });
 });

クリックされたリンクに対応するボックスが表示 (アクティブ) されている場合、そのボックスは非表示になります。それ以外の場合、表示されているボックスは非表示になり、クリックされたリンクに対応するボックスが表示されます。ユーザーがページのどこか (リンク以外) をクリックすると、開いているボックスはすべて閉じられます。ハッピーコーディング！

参照

于 2013-01-22T20:09:27.390 に答える