更改jQuery中的img src
Changing img src in jQuery
我希望在用户向下滚动页面后更改图像(图像大小相同,但颜色不同):
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");
}
})
})
当我向下滚动页面时,图像是不可识别的,它只是一个问号。
注意
图像路径有效,相信我。
-
我觉得这是一个非常简单的解决方案,有什么想法吗?
检查
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/
试试这个
var path='path/to/image-color-icon.png'
$("#twitter").attr("src", path);
相关文章:
- Javascript:使用绝对路径设置img src
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 插入“;img src"在javascript中
- 检索MongoDB binData并显示为<img>src
- 如何将JSON结果设置为'src'共'img'以在ASP.NET MVC4中显示图像
- 从二维数组中获取img src和img维度,并在body中显示
- 在不发出请求的情况下设置img src
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- 使用<img>Ember-cli中的src
- 使用JQuery从包含A href值中设置*all*IMG-src值
- Django,HTML,JS:<img src=“#">可以在HTML中工作,但不能在JS文件中工作
- Img-src只通过javascript更改一次
- 正则表达式使链接可点击(仅在“href”而不是“img src”中)
- 在带有ng-src的IMG上,边框仍然存在
- 交换 img src 或显示/隐藏多个图像是否更快
- 如果有办法在 N 秒内加载未触发,则有没有办法设置 img src
- 从javascript对象中获取一个src-img,并将其放入HTML中
- 更改src-img指令或过滤angular
- 当使用图片、源代码和srcset时,如何检查加载了哪个src?(img.src为空)