2

サムネイル画像ビューア用の次のスクリプトがあります。各サムネイル画像と大きな親画像には、それぞれ親指と大で終わる名前を付けました。このスクリプトは、ファイルパスを変更することにより、大きな画像をクリックされたサムネイル画像に置き換えます。

<script>
$('.thumbs').delegate('img','click', function(){
    $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
    $('.large').hide().fadeIn(500);
});
</script>

サムネイルをクリックするたびに、ページが一番上に戻ります。私はこれを防ごうとしました

return false;

動作しますが、大きな画像は更新されません。ページが上にスクロールしないようにする別の方法はありますか?

ご協力いただきありがとうございます。

4

4 に答える 4

3

私はIE9でそれをしていないようです。デフォルトのアクションを防止してみてください:

<script> 
$('.thumbs').delegate('img','click', function(event){ 
    $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('.large').hide().fadeIn(500); 
    event.preventDefault();
}); 
</script>
于 2012-07-16T18:10:08.797 に答える
2

ページはページの一番上までスクロールしません。画像ソースを変更するため、大きな画像の一番上までスクロールします。

エフェクトを無効にして非表示にしたり、フェードインしたりして、問題が解決するかどうかを確認できます。

問題が解決しない場合は、問題が解決した次のコードを追加するだけです。

<script>
$('.thumbs').delegate('img','click', function(){
    var y = window.pageYOffset;
    $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
    $('.large').hide().fadeIn(500);
    window.scrollTo(0, y)
});
</script>

英語の間違いでごめんなさい。私はGoogle翻訳を使っています。

于 2012-07-16T18:22:10.043 に答える
1

return false を正確にどこに配置しましたか? あなたが最後にそれをしたなら、それはうまくいったはずです。このような：

<script>
$('.thumbs').delegate('img','click', function(){
    $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
    $('.large').hide().fadeIn(500);
    return false;
});
</script>

e.preventDefault() を使用して、デフォルトのリンク アクションを停止することもできます。 

<script>
    $('.thumbs').delegate('img','click', function(e){
        $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
        $('.large').hide().fadeIn(500);
        e.preventDefault();
        return false;
    });
</script>
于 2012-07-16T18:10:06.217 に答える
1

これは、大きな画像 src を置き換えると、一瞬消えて、ページが小さくなり、スクロールが不要になったために上に移動するために発生します。ページをズームしてみると、それが起こらないことがわかります (ctrl + マウスを上にスクロール)。

変更されない修正サイズの DIV を使用して大きな画像を配置するだけです。

<div style="height: 490px; width: 490px;float: left;">
    <img style="display: block;" class="large" src="images/06_large.png">
</div>
于 2012-07-16T18:16:33.747 に答える