使用javascript更改img src时添加转换 [英] Add transition while changing img src with javascript
本文介绍了使用javascript更改img src时添加转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个img标签,我想在悬停时更改src并且一切正常但我想添加一些转换,所以它看起来不那么粗糙但是因为它是一个img src我不能用css来定位它。
I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}
推荐答案
你想要一个交叉渐变。基本上你需要将两个图像放在彼此的顶部,并将一个不透明度
设置为0,这样它就会被隐藏:
You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity
to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
转换
在图片上设置 opacity
,我们需要做的就是用这个脚本触发它:
With a transition
set for opacity
on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
这篇关于使用javascript更改img src时添加转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文