Javascript圖像交換的CSS過渡

我有一組圖像與Javascript中的另一組圖像交換，但它在兩幅圖像之間捕捉時看起來很醜。我希望它們消失，並且我已經設法在CSS中使用網頁背景來完成此操作。麻煩的是，我無法讓它在圖像上工作，我不知道爲什麼。Javascript圖像交換的CSS過渡

這裏的腳本圖像之間進行切換：

function change_img() 
{ 
    document.images.logo.src = "Images/logo(w).png"; 
    document.images.about.src = "Images/About50(w).png"; 
    document.images.projects.src = "Images/Projects50(w).png"; 
    document.images.contact.src = "Images/Contact50(w).png"; 
} 

function change_back() 
{ 
    document.images.logo.src = "Images/logo.png"; 
    document.images.about.src = "Images/About50.png"; 
    document.images.projects.src = "Images/Projects50(2).png"; 
    document.images.contact.src = "Images/Contact50.png"; 
}

這是在文檔的頭部。然後我們有一個圖像的一個例子來進行交換：

<center><img class="transition" name="logo" src="Images/logo.png" height="300" style="z-index:1"></center>

，用一個鼠標懸停事件激活了其他圖像之一。總共有四個要更改。最後，我認爲CSS將觸發過渡：

.transition{-webkit-transition: all 0.5s ease; 
      -moz-transition: all 0.5s ease; 
      -ms-transition: all 0.5s ease; 
      -o-transition: all 0.5s ease; 
      transition: all 0.5s ease;}

很簡單，我已經陷在一個單一的CSS規則的轉換規則，並將其歸因於每個圖像。我以某種方式錯誤地鏈接了它嗎？我不明白爲什麼這不起作用..

來源

2013-06-18 Tom Sykes

什麼CSS可以「過境」是CSS屬性，而不是像src這樣的元素屬性。

你應該做的是在DOM中有兩個圖像，一個用於當前圖像，另一個用於新圖像，並使後者淡入前者。

事情是這樣的：

function change_img() { 
    var img = document.getElementsByName("logo")[0], 
     newImg = new Image(); 
    newImg.name = "logo"; 
    newImg.src = "Images/logo.png"; 
    img.parentNode.insertBefore(newImg, img.nextSibling); 
    newImg.className = "transition"; 
    setTimeout(function() {img.parentNode.removeChild(img);}, 500); 
    ... 
}

這是CSS部分：

[name="logo"] + img { 
    opacity: 0; 
    transition: opacity 0.5s ease; 
} 
.transition {opacity: 1;}

來源

2013-06-18 10:48:39 MaxArt

任何想法，我可以鏈接過渡，使其發揮作用？就像我說過的，我使用了一種非常相似的技術來使用相同的鼠標懸停事件更改頁面的背景顏色。 –

@TomSykes我正在更新我的答案。我還沒有完成。 – MaxArt

哦對，對不起哈哈 –

我已經成功在CSS與網頁背景，這樣做只是

webkit瀏覽器支持背景淡化轉換。所以如果你想用繼續使用背景。假設標誌交換是2和它們的大小等於..例如100pixel：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>talk</title> 
<style> 
#logo{ 
width:100px; 
height:100px; 
-webkit-transition: background-image 1s ease-in-out; 
background-image:url("logo1.png"); 
} 
#logo.anotherLogo { 
background-image:url("logo2.png"); 
} 
</style> 
<script> 
var swap=function(){ 
document.getElementById('logo').classList.toggle('anotherLogo'); 
} 
window.onload=function(){ 
document.getElementsByTagName('button')[0].addEventListener('click',swap,false); 
} 
</script> 
</head> 
<body> 
<div id="logo"></div> 
<button>swap logo</button> 
</body> 
</html>

解決方案2，這其中有更多的支持（適用於最現代的瀏覽器，而不是僅僅只在WebKit瀏覽器）

這需要一個div 2倍內的圖像和在CSS中使用的絕對和u能看到更多的CSS

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>logo</title> 
<style> 
#logo{ 
width:128px; 
height:128px; 
} 
#logo>img{ 
position:absolute; 
width:128px; 
height:128px; 
-webkit-transition:opacity 1s ease-in-out; 
} 

#logo>img:nth-child(2){ 
opacity:0; 
} 
#logo.anotherLogo>img:nth-child(2){ 
opacity:1; 
} 
#logo.anotherLogo>img:nth-child(1){ 
opacity:0; 
} 
</style> 
<script> 
var swap=function(){ 
document.getElementById('logo').classList.toggle('anotherLogo'); 
} 
window.onload=function(){ 
document.getElementsByTagName('button')[0].addEventListener('click',swap,false); 
} 
</script> 
</head> 
<body> 
<div id="logo"> 
<img src="logo1.png"/> 
<img src="logo2.png"/> 
</div> 
<button>swap logo</button> 
</body> 
</html>

溶液3

在這種情況下，div容器具有其中一個徽標的背景以及內部的圖像。它也與您的<center><img/></center>具有相同的結構，並且可能會用較少的修改代替現有的代碼。然而標籤「中心」是一箇舊標籤，不應該在現代網站中使用。背景圖像，你可以使用的背景大小的CSS

background-size:contain;

包含

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>logo</title> 
<style> 
#logo{ 
width:128px; 
height:128px; 
background-image:url(logo2.png); 
} 
#logo>img{ 
width:128px; 
height:128px; 
-webkit-transition:opacity 1s ease-in-out; 
} 
#logo.anotherLogo>img{ 
opacity:0; 
} 
</style> 
<script> 
var swap=function(){ 
document.getElementById('logo').classList.toggle('anotherLogo'); 
} 
window.onload=function(){ 
document.getElementsByTagName('button')[0].addEventListener('click',swap,false); 
} 
</script> 
</head> 
<body> 
<div id="logo"> 
<img src="logo1.png"/> 
</div> 
<button>swap logo</button> 
</body> 
</html>

* IFU萬塔的具體尺寸調整圖像大小，以使整個圖像是insideyour DIV

cover填充你的容器

或者你也可以使用w寬度和高度

background-size:100px 100px;

如果您想爲您的multiswap功能提供一些更多的幫助......請問。

來源

2013-06-18 21:02:08 cocco

Javascript圖像交換的CSS過渡

回答

相關問題