Question

整个上午我一直在搞乱这个问题，我对jQuery几乎一无所知......道歉。

我有四个菜单项（即图像），它们将包含在响应式网格中。单击时，我想要一个箭头（在此示例中为一个框）移动到单击的列表项图像的中心。

现在，这个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%;
}

JQUERY：

$("#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");
});

谢谢！

Answer 1

您与初始实施非常接近。我稍微简化了逻辑，为每个导航项添加了一个类。主要的想法是你可以使用像素，你只需要它们相对于你的图像。在这里，我将拍摄图像位置（以您希望的任何方式指定），并根据该位置计算箭头的位置。然后以一点中心，我们可以找到每个图像的确切中间。

小提琴：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/

您可以更改选择器以确定您希望箭头指向最初的女巫形象。

jQuery动画到具有不同宽度的元素的中心

1 个答案: