我有我要的改变src悬停时,它所有的作品,但我想补充一些过渡所以它看起来不那么粗糙img标签,但因为它是一个IMG SRC我不能用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);
}
你想要一个交叉淡入淡出。基本上你需要在彼此顶部两个图像的位置,和一个人的opacity
设置为0,这样它会被隐藏:
<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;
}
随着上的图像transition
设置opacity
,我们需要做的就是这个脚本触发它:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
下面是使用的CSS transition
纯的CSS溶液。您可以使用div
作为容器,并设置background-image
上徘徊。
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>
万一有人好奇如何真正建立,当你真正改变图像的源属性的过渡般的效果,这是我想出了一个解决方案。
使用Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
在这里你有一个数据属性驱动组件,它呈现出成一个动态的图像,即使你使用类似parallax.js - 这将给“褪色为黑色,背部”图像之间的错觉。希望它可以帮助别人。
我通常使用jQuery的这一点。
$(document).on("mouseover", '.image_class', function () {
$(this).attr('src', 'img/img2.jpg');
});
$(document).on("mouseout", '.image_class', function () {
$(this).attr('src', 'img/img1.jpg');
});