2

ユーザーがマウスまたはトラックパッドでスクロールすると、一連の画像をフリックするページを設定しました。私は jQuery を使用してページの上部からの距離を測定しています - scrollTop() - 次に、DOM 内の特定の ID の画像ソースを変更します。

これは、Firefox、Chrome、Safari、Opera、IE9、および iPad、iPhone などで完全に機能します。ただし、IE8 では機能しません。

これはHTMLです:

<div id="flipping-container">
    <img id="flipping-id" class="flippingTarget" src="imageOne.png" alt="imageone" />
</div>

これはJSです:

$(document).scroll(function() {
    var toTop = $(document).scrollTop();
    if (toTop <= 340) {
            $('.flippingTarget').attr('src','imageOne.png');
    }
    else if ((toTop <= 392) && (toTop > 341)){
            $('.flippingTarget').attr('src','imageTwo.png');
    }
    else if ((toTop <= 445) && (toTop >= 393)){
            $('.flippingTarget').attr('src','imageThree.png');
    }

// AND SO ON
// ENDING WITH...

    else {
            $('.flipping-target').attr('src','image1.png');
    };
});

「flipping-container」の div ID には、CSS 値 position:fixed; が与えられます。そのため、常に表示されます。

私は StackOverflow の投稿に目を通しましたが、まだ有効な解決策を見つけることができませんでした。scrollTop() 値は、ページをdivおよび/または上からピクセル数までスムーズにスクロールするボタンのクリックイベントがあるため、完全に正常に読み取られています。IE8 はこれで問題ないので、html/body/document/window scrollTop() の問題ではありません。

.addClass() の .attr() 値を切り替えて、それが取得されるかどうかを確認しました。しかしIE8にはありません。そのため、src 属性自体とは直接関連していない可能性があります。私は自分のクラス名とターゲットを再確認しましたが、それらはすべて問題ありません (また、他のブラウザーが意図したとおりに動作することが証明されています)。

手がかりはありますか?どんな助けでも大歓迎です。

4

0 に答える 0