添加轉換，同時更改img src與javascript

我有一個img標記，我想更改src時懸停和它的所有作品，但我想添加一些過渡，所以它看起來不那麼粗糙，但因爲它是一個IMG SRC我不能目標與CSS。添加轉換，同時更改img src與javascript

HTML

<img id="bg" src="img/img1.jpg"> 
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">

function imgChange(im){ 
document.getElementById('bg').src=(im); 
}

來源

2014-05-10 ernerock

你可能不能夠從一個圖像無縫融合到其他（當你改變src這會立即發生），但你可以淡出，設置src和褪色回到一些CSS轉換... – adv12

您可以改爲在'div'標籤上使用CSS'background-image'。然後你需要兩個div，一個覆蓋另一個（將它們封裝在一個包裝器div中，兩個孩子都在絕對位置處於'left'：'top' 0：0）。然後你可以在**'opacity' **（平滑）上使用'transition'。 –

你想交叉淡入淡出。基本上你需要在彼此頂部兩個圖像的位置，並設置一個的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/

來源

2014-05-10 17:13:39

小提琴破碎，需要修復圖像 – Ezeewei

-3

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

來源

2016-12-20 07:56:51 user7319810

你的代碼只會改變圖像的src，它不會添加轉換。 – brian17han

下面是使用CSS transition純的CSS溶液。您可以使用div作爲容器，並設置懸停時的background-image。

.image-container { 
 
    background: url(http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png) 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://www.iconsdb.com/icons/preview/gray/stackoverflow-xxl.png"); 
 
}

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

來源

2017-09-14 21:19:44 brian17han

添加轉換，同時更改img src與javascript

回答

相關問題