Question

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

现在 - 它只是向上或向下移动容器#example，使用css值margin-top，为272px。我设置了两倍的上限，这样容器不能超过两倍，但我不知道如何让每个按钮正确移动它。

You can view the slider i've built by clicking here，但我会发布下面写的大部分重要的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>

Answer 1

将链接更改为：

<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'
    });
}

你不需要过于复杂化。

javascript onclick变量/社交小部件滑块

1 个答案: