在jQuery中更改img src

时间:2016-01-13 04:29:31

标签: javascript jquery html css

我想要在用户向下滚动页面后更改图像(图像大小相同,但颜色不同):

HTML

<ul class="social-media-nav-center">
  <li>
    <a href="https://twitter.com/" target="_blank"><img id="twitter" class="small" src="path/to/image-icon.png" /> 
    </a>
  </li>
</ul>

的jQuery

$(document).ready(function(){
  $(window).scroll(function(){      
    if($(window).scrollTop() > $(window).height()) {
      $("#twitter").attr("src", "../path/to/image-color-icon.png");
    }
  })
})

当我向下滚动页面时,图像无法识别,只会出现问号。

注意

图像路径有效,相信我。

-

我觉得这是一个非常简单的解决方案,任何想法?

2 个答案:

答案 0 :(得分:-1)

检查

HTML

<ul class="social-media-nav-center">
  <li>
    <a href="https://twitter.com/" target="_blank"><img id="twitter" class="small" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRgdlWvqZIB0r6qkjFS_t9uMKD9gQIVMV3fE-Vw9BMoRfNEmJG2" /> 
    </a>
  </li>
</ul>

Jquqey

$(document).ready(function(){
  $(window).scroll(function(){      
    if($(window).scrollTop() > $(window).height()) {
      $("#twitter").attr("src", "http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg");
    }
  })
})

CSS

.social-media-nav-center{height:1000px;}

https://jsfiddle.net/yakcbanL/

答案 1 :(得分:-3)

试试这个

var path='path/to/image-color-icon.png'
$("#twitter").attr("src", path);