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變量/社交小部件滑塊

回答

相關問題