將淡入效果添加到剛剛使用javascript加載的圖像

我有一個主圖像，可以通過用戶單擊鏈接將其更改爲五個不同圖像之一。在這種情況下，或者鏈接'一'，'二'，'三'，'四'或'五'。將淡入效果添加到剛剛使用javascript加載的圖像

因此，點擊鏈接'三'將更改主圖像顯示第三個圖像。

這是所有工作正常，但我正在尋找圖像淡入，而不是立即出現。這是可能的與下面的代碼快速修改？

提前許多感謝，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Image Change Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript"> 
function changeIt(objName) 
{ 
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently 
var obj = document.getElementById(objName); 

//An array that hold the IDs of images that we mentioned in their DIV blocks 
var objId = new Array(); 

//Storing the image IDs into the array starts here 
objId[0] = "image1"; 
objId[1] = "image2"; 
objId[2] = "image3"; 
objId[3] = "image4"; 
objId[4] = "image5"; 
//Storing the image IDs into the array ends here 

//A counter variable going to use for iteration 
var i; 

//A variable that can hold all the other object references other than the object which is going to be visible 
var tempObj; 

//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the 
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part 
//of the if statement within this loop. 
for(i=0;i<objId.length;i++) 
{ 
    if(objName == objId[i]) 
    { 
     obj.style.display = "block"; 
     rotate.nu=i; 
    } 
    else 
    { 
     tempObj = document.getElementById(objId[i]); 
     tempObj.style.display = "none"; 
    } 
} 
return; 
} 

function rotate() 
{ 

//An array that hold the IDs of images that we mentioned in their DIV blocks 
var objId = new Array(); 

//Storing the image IDs into the array starts here 
objId[0] = "image1"; 
objId[1] = "image2"; 
objId[2] = "image3"; 
objId[3] = "image4"; 
objId[4] = "image5"; 
rotate.nu=rotate.nu||0; 
document.getElementById(objId[rotate.nu]).style.display = "none"; 
rotate.nu=++rotate.nu%objId.length; 
document.getElementById(objId[rotate.nu]).style.display = "block"; 
} 

</script> 
</head> 

<body> 
<div id="image1" onmouseup="rotate();" > 
<img src="dimming/1.jpg" border="0" alt="one" /> 
</div> 

<div id="image2" style="display:none" onmouseup="rotate();"> 
<img src="dimming/2.jpg" border="0" alt="two" /> 
</div> 

<div id="image3" style="display:none" onmouseup="rotate();"> 
<img src="dimming/C.jpg" border="0" alt="three" /> 
</div> 

<div id="image4" style="display:none" onmouseup="rotate();"> 
<img src="dimming/D.jpg" border="0" alt="four" /> 
</div> 

<div id="image5" style="display:none" onmouseup="rotate();"> 
<img src="dimming/E.jpg" border="0" alt="five" /> 
</div> 
<br><br> 
<a id="one" href="#" onclick="changeIt('image1');">one</a> 
<a id="two" href="#" onclick="changeIt('image2');">two</a> 
<a id="three" href="#" onclick="changeIt('image3');">three</a> 
<a id="four" href="#" onclick="changeIt('image4');">four</a> 
<a id="five" href="#" onclick="changeIt('image5');">five</a> 
</body> 
</html>

來源

2013-04-21 Darren Riches

我沒有看到任何上面的jquery。是否有這個標籤與jQuery的原因？請注意，目前的答案需要jQuery。 – Scott 2013-04-21 18:03:03

如果可以用jQuery實現，那麼我願意接受建議。感謝您的幫助;-) – 2013-04-21 18:07:02

如果你在尋找簡單的方法，你可以使用jQuery框架。像這樣的用法：

$('.image').fadeIn(1000)

來源

2013-04-21 17:36:34 Johnny

嗨，約翰尼，上面的例子會在哪裏？或者我需要重寫整個事情？ – 2013-04-21 17:42:17

將淡入效果添加到剛剛使用javascript加載的圖像

回答

相關問題