3

ここに私のJavaScriptコードがあります:

$(document).ready(function() {
    //variables
    var noOfSlides = 8;
    var slideWidth = 702;
    // Skip to a slide in sequence
    function goToSlide (number) {
        marginValue = ((-slideWidth * number) );
        $('#slide_inner_wrapper').stop().animate({'left': marginValue }, {duration: 1000});
    }
    $('#slide_inner_wrapper').width(noOfSlides * slideWidth) + 135; //Initial sizing of wrapper

    // Listeners
    $('.marker').bind('click', function() {
        number = parseInt($(this).attr('id').split('-').slice(1));
        $(this).parent().siblings().removeClass('current');
        $(this).parent().addClass('current');
        goToSlide(number);
    });
});

私はフィドルを作成したので、私の問題を見ることができます: http://jsfiddle.net/jXVR2/1/

ウィンドウのサイズを少し変更する必要があるかもしれません...しかし、うまくいけば私が達成しようとしていることを見ることができます! クリックすると特定の年にアニメーション化されるタイムラインです。

上部の個々の年をクリックすると、対応するスライドがビューの中央に表示されます。これをロードして 2005 年から一度に 1 枚のスライドをクリックするとうまくいきますが、複数のスライドをスキップするとすぐに位置がずれますか? これはマージン値に関係していると思いましたが、そうではありません-計算は問題ありません。私は何時間もそれを見てきましたが、それを解読することはできません...それはポジショニングに関係しているのでしょうか? 私は解決策なしでこれをいじるのに最後の時間を費やしました:(

どんな助けでも大歓迎です！初めての投稿ですのでよろしくお願いします！ありがとう ：）

4

1 に答える 1

1

jsfiddleから得たものですが、タグのハッシュタグが原因で問題が発生し<a href="#2005">ます。

リンクをクリックすると、フォーカスがハッシュタグに移動するため、アニメーションがオフキーになります。

ハッシュタグが必要ない場合は、単純にに置き換えることができます<a href="#">。

また、ハッシュタグが必要な場合return falseは、クリック機能の最後に使用します。

$('.marker').bind('click', function() {
    number = parseInt($(this).attr('id').split('-').slice(1));
    $(this).parent().siblings().removeClass('current');
    $(this).parent().addClass('current');
    goToSlide(number);
    return false;
});
于 2012-11-21T18:48:06.660 に答える