想要在向下滚动和向上滚动时用图像 resized.png 替换 #logo 中的图像应恢复正常。
尝试使用代码
<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 可以建议吗?
更新答案
检查这里,工作演示http://jsfiddle.net/yeyene/49HA3/1/
您试图错误地提供背景图像a
tag,实际上你需要改变srcimg
标签内a
tag.
这就是为什么你有 2 张图像。一个为a
标签背景图像,另一个是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');
}
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)