將此懸停效果改爲淡入淡出效果？

我有這個腳本來改變圖像源onmouseover/onmouseout。我現在添加了一些新的元素，我希望做同樣的事情，但也淡化，而不是立即更改圖像源。有人可以給我一個提示，或者甚至可以更改我的代碼嗎？我會感激的！將此懸停效果改爲淡入淡出效果？

的Javascript：

d004on = new Image(100, 100); 
    d004on.src = "images/catalog/dus004_h.png"; 

    d004off = new Image(100, 100); 
    d004off.src = "images/catalog/dus004.png"; 

} 

function change(imgName) { 
    if (document.images) { 
     imgOn = eval(imgName + "on.src"); 
     document[imgName].src = imgOn; 
    } 
} 

function changeback(imgName) { 
    if (document.images) { 
     imgOff = eval(imgName + "off.src"); 
     document[imgName].src = imgOff; 
    } 
}

HTML：

<img src="images/catalog/dus004.png" alt="dus004" onMouseover="change('d004')" onMouseout="changeback('d004')"/>

來源

2013-02-20 user2037183

爲什麼你會使用'eval（）'連接字符串。 – JJJ 2013-02-20 13:29:59

因爲'eval（）'是現在的東西。 xD – Achrome 2013-02-20 13:30:35

我wud建議嘗試jquery ... :) – KrIsHnA 2013-02-20 13:35:48

-1

首先擺脫這種邪惡的eval東西;）二jQuery有一些漂亮的動畫功能...你允許使用jQuery？ http://api.jquery.com/fadeIn/

是這樣的嗎？ http://jsbin.com/ewijam/1/edit

哦，由wqay，謝謝你不喜歡的人誰試圖幫助^^

來源

2013-02-20 13:36:45 Christian

我可以使用jQuery。我所需要的是能夠改變圖像源的懸停效果。我知道淡入淡出功能是如何工作的，我只是不知道如何以這種方式使用它。 – user2037183 2013-02-20 13:38:43

它在jQuery的

HTML

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<span>Click here...</span> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
</body> 
</html>

CSS

span { color:red; cursor:pointer; } 
div { margin:3px; width:80px; display:none; 
height:80px; float:left; } 
div#one { background:#f00; } 
div#two { background:#0f0; } 
div#three { background:#00f; }

很容易

Jquery

<script src="http://code.jquery.com/jquery-latest.js"></script> 

    $(document.body).mouseenter(function() { 
    $("div:hidden:first").fadeIn("slow"); 
    });

來源

2013-02-20 13:48:50

將此懸停效果改爲淡入淡出效果？

回答

相關問題