在向下滚动时替换div中的图像 [英] replace image in div on scroll down

问题描述

想要在#logo中替换图像resized.png，向下滚动并向上滚动应该恢复正常。

wanna replace the image in #logo with the image resized.png upon scroll down and on scroll up should return to normal.

尝试使用代码

<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建议？

resized.png does come on top but wanna replace it altogether and be restored upon scroll to top. the link to the site is :http://elementsmart.com/product/deep-azure-rajasthani-necklace-set/ can sum1 suggest ?

推荐答案

更新答案

点击此处，查看工作演示 http： //jsfiddle.net/yeyene/49HA3/1/

您试图将背景图片错误地提供给 a 标签，实际上你需要在 a 标签内更改 img 标签的src。

You are trying to give background-image wrongly to a tag, actually you need to change the src of img tag within a tag.

这就是为什么你有2张图片。一个用于一个标签background-image，另一个是 img 在 a tag。

That is why, you got 2 images. One for a tag background-image, another is img within a tag.

$(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');
        }
    });
});

这篇关于在向下滚动时替换div中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！