2

我有以下用于缩略图查看器的脚本。我将每个缩略图图像和大型父图像分别命名为 thumb 和 large 结尾。该脚本通过更改文件路径将大图像替换为单击的任何缩略图。

<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>

对不起任何英语错误。我在用谷歌翻译。

于 2012-07-16T18:22:10.043 回答
1

你到底把返回错误放在哪里？如果你最后做到了，它应该有效。像这样：

<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 回答