Question

我有一个img标签，我想在悬停时更改src并且一切正常但我想添加一些转换，所以它看起来不那么粗糙，但因为它是一个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);
}

Answer 1

你想要一个交叉渐变。基本上你需要将两个图像放在彼此的顶部，并将一个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');
    });
});

http://jsfiddle.net/Ne5zw/12/

Answer 2

这是一个使用css transition的纯css解决方案。您可以使用div作为容器，并在悬停时设置background-image。

＆＃13;

.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");
}

＆＃13;

<div class="image-container"></div>

＆＃13;

Answer 3

以防万一有人好奇如何在实际更改图像的源属性时实际创建类似过渡的效果，这就是我想出的解决方案。

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之类的东西，其中有一个数据属性驱动的组件也可以将其渲染成动态图像。希望对别人有帮助。

Answer 4

我通常使用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');
  });

使用javascript更改img src时添加转换

4 个答案: