javascript - 向下滚动时替换 div 中的图像

Question

想要在向下滚动和向上滚动时将 #logo 中的图像替换为 resized.png 图像应该恢复正常。

尝试使用代码

<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) $('#topbar, .cart-label').fadeOut('slow');
$('#logo').css({'background-image':'url(http://elementsmart.com/wp-content/uploads/2013/06/resized.png)','background-repeat':'no-repeat'})
if($(this).scrollTop() < 100) $('#logo, #topbar, .cart-label').fadeIn('fast');
})
});

resized.png 确实位于顶部，但想要完全替换它并在滚动到顶部时恢复。该网站的链接是：http : //elementsmart.com/product/deep-azure-rajasthani-necklace-set/ sum1 可以建议吗？

Answer 1

更新答案

在这里检查，工作演示http://jsfiddle.net/yyene/49HA3/1/

您试图错误地将背景图像赋予a标签，实际上您需要更改img标签内a标签的 src。

这就是为什么，你有 2 张图片。一个用于a标签背景图像，另一个img在a标签内。

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('#topbar, .cart-label').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'184px','height':'33px'})
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/resized.png');
        }
        if($(this).scrollTop() < 100) {
            $('#logo, #topbar, .cart-label').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'184px','height':'60px'})    
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/logo2.png');
        }
    });
});