-1

我使用在互联网上某处找到的一些旧代码构建了一个社交滑块小部件。我不太擅长 Javascript，但我想知道您是否可以就如何使其正常运行给我一些建议。

现在 - 它只是使用 css 值 margin-top 将容器#example 向上或向下移动 272 像素。我已经设置了两倍的上限，因此容器不能上升超过两次，但我不知道如何让每个按钮正确移动它。

您可以通过单击此处查看我构建的滑块，但我将发布我在下面编写的大部分重要 html。

<script language="javascript">
function example_animate(px) {
  var newMargin = parseInt($('#example').css('margin-top')) + px;
  if(newMargin >= -544 && newMargin < 272) {
    $('#example').animate({
        'marginTop' : newMargin + 'px'
    });
  }
}
</script>

<div class="container">
    <div class="socials-menu">
        <a href="#a" class="social-facebook" onclick="example_animate(272)"></a>
        <a href="#b" class="social-twitter" onclick="example_animate(-272)"></a>
        <a href="#c" class="social-youtube" onclick="example_animate(-272)"></a>
    </div>
    <div id="example" class="socials">
        FACEBOOK / TWITTER WIDGET IFRAMES WOULD GO HERE
    </div>
</div>
4

1 回答 1

0

将链接更改为：

<a href="#a" class="social-facebook" onclick="example_animate(0)"></a>
<a href="#b" class="social-twitter" onclick="example_animate(-272)"></a>
<a href="#c" class="social-youtube" onclick="example_animate(-544)"></a>

你的功能是：

function example_animate(margin) {
    $('#example').animate({
        'marginTop' : margin + 'px'
    });
}

你不需要把事情复杂化。

于 2013-03-02T22:10:00.283 回答