javascript 向下滚动时替换 div 中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17390576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
replace image in div on scroll down
提问by dhruv
wanna replace the image in #logo with the image resized.png upon scroll down and on scroll up should return to normal.
想要在向下滚动和向上滚动时将#logo 中的图像替换为 resized.png 图像应该恢复正常。
tried with the code
用代码试过
<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 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 ?
resized.png 确实位于顶部，但想要完全替换它并在滚动到顶部时恢复。该网站的链接是：http: //elementsmart.com/product/deep-azure-rajasthani-neccklece-set/ sum1 可以建议吗？
采纳答案by yeyene
UPDATE ANSWER
更新答案
Check here, working DEMO http://jsfiddle.net/yeyene/49HA3/1/
在这里检查，工作演示http://jsfiddle.net/yeyene/49HA3/1/
You are trying to give background-image wrongly to atag, actually you need to change the src of imgtag within atag.
您试图错误地为a标签提供背景图像，实际上您需要更改img标签内a标签的 src 。
That is why, you got 2 images. One for atag background-image, another is imgwithin atag.
这就是为什么，你有 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');
}
});
});
