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

-1

我已经构建了一个社交滑块小部件，它使用了我在互联网上某处找到的一些旧代码。我不擅长Javascript，但我想知道如果你能给我一些关于如何使它正常运行的建议。javascript onclick变量/社交小部件滑块

现在 - 它只是将容器#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>

来源

2013-03-02 Farseen

它怎么不起作用？ – Blender 2013-03-02 06:15:57

我们需要知道问题所在。 – Bernie 2013-03-02 06:22:01

请勿使用'onclick =“...”' – 2013-03-02 06:40:51

更改链接：

<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-02 22:10:00

谢谢！我是新来的Javascript :) – Farseen 2013-03-07 17:47:39

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

回答

相关问题