-1

インターネット上のどこかで見つけた古いコードを使用して、ソーシャル スライダー ウィジェットを作成しました。私は Javascript があまり得意ではありませんが、適切に機能させる方法についてアドバイスをいただけないでしょうか。

現時点では、css 値 margin-top を使用して、コンテナ #example を上下に 272px 移動しているだけです。コンテナが2回以上上がらないように、その2倍の上限を設定しましたが、各ボタンを適切に動かす方法がわかりません。

ここをクリックして作成したスライダーを表示できますが、以下に書いた重要な 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 に答える