1

私は午前中ずっとこれをいじっていました.jQueryについてはほとんど何も知りません...申し訳ありません。

レスポンシブ グリッドに含まれる 4 つのメニュー項目 (画像) があります。クリックすると、クリックされたリスト項目の画像の中央に矢印 (この例ではボックス) が移動します。

現在、この JavaScript は右にしか移動していません (以前に別のバージョンを使用して、左/右に移動させました。これが私がやりたいことです)。また、この場合のボックスは、画面の幅にもかかわらず、常にクリックされた円の中心に整列する必要があります。それが大きな問題でした...ピクセルや正確な幅を使用できません。

ここで表示: http://jsfiddle.net/RevConcept/An4TF/1/

HTML:

<div id="menu-wrap">
    <ul>
        <li>
            <img id="discover" src="http://nillabean.com/images/circle-225.png" />
        </li>
        <li>
            <img id="design" src="http://nillabean.com/images/circle-225.png" />
        </li>
        <li>
            <img id="develop" src="http://nillabean.com/images/circle-225.png" />
        </li>
        <li>
            <img id="deploy" src="http://nillabean.com/images/circle-225.png" />
        </li>
    </ul>
</div>
  <div id="wrap">
    <div class="block"></div>
</div>

CSS:

div.block {
    position:absolute;
    background-color:#abc;
    width:90px;
    height:90px;
    margin:5px;
}

#wrap, #menu-wrap {
    width:100%;
    height:100px;
    position:relative;
    border:1px #000 solid;
}

#menu-wrap {
    text-align:center;
    height:235px;
}

ul {
    margin:0px;
    padding:0px;
}

li {
    list-style:none;
    float:left;
    width:25%;
}​

Jクエリ:

$("#discover").click(function() {
    $(".block").animate({
        "left": "+=0%"
    }, "slow");
});

$("#design").click(function() {
    $(".block").animate({
        "left": "+=50%"
    }, "slow");
});

$("#develop").click(function() {
    $(".block").animate({
        "left": "+=75%"
    }, "slow");
});

$("#deploy").click(function() {
    $(".block").animate({
        "left": "+=100%"
    }, "slow");
});

ありがとう！

4

1 に答える 1

2

あなたは最初の実装に非常に近かった。各ナビゲーション項目にクラスを追加して、ロジックを少し単純化しました。主なアイデアは、ピクセルを使用できるということです。必要なのは、画像に対して相対的であることだけです。ここでは、画像の場所 (任意の方法で指定) を取得し、それに基づいて矢印の位置を計算しています。次に、少しセンタリングすると、各画像の正確な中央を見つけることができます。

フィドル: http://jsfiddle.net/An4TF/10/

jQuery:

  $(".nav-image").click(function(event){
    var x = $(this).offset().left;

    var img_width = $(this).width();
    var arrow_width = $(".block").width();

    var arrow_x = x + img_width/2 - arrow_width/2;

    $(".block").animate({
        "left": arrow_x
    }, "slow");
  });

開始位置をいじる: http://jsfiddle.net/An4TF/14/

セレクターを変更して、矢印が最初に指す魔女のイメージを決定できます。

于 2012-07-25T19:30:10.613 に答える