與jQuery的多個mousehover？

Question

假設我有一個帶有背景圖片（我的標誌）的div，我需要將此div與其他4個div切換，這些div是與其他顏色相同的圖像。每個圖像將使用jquery效果在mousehover上調用，以便順利顯示，順序將爲div1,2,3,4,5，然後重新啓動。

一個更簡單的解釋是..一個標誌有5種不同顏色的背景，每個背景顏色會在您將鼠標移到標誌上時顯示，就像您第一次通過它時會顯示綠色一樣，但如果你再次將鼠標移到徽標上，它會變成藍色等等。

現在作爲一個JavaScript和jQuery的全新手...我怎麼能做到這一點？有人可以引導我通過一些教程或特定文章，或者可以給我一個剪輯，如果代碼開始？ 我試圖問這之前，有人回答一段代碼將是一個變量（完全是一個計數器），但我真的不明白它是如何工作的，以及如何實現它...

Answer 1

你可以簡單地將您的徽標的GIF /透明度png格式，並將其設置爲背景，然後爲這些值之間的backgroundColor css屬性製作動畫（構建以前的腳本）：

$(document).ready(function() 
{ 
    var colours = ['blue','green','red','orange']; 
    var colIndex = 0; 

    $('#logo').mouseover(function() 
    { 
     if(colIndex > colours.length) 
      colIndex = 0; 

     $(this).css('backgroundColour', colours[colIndex]); 
     colIndex++; 
    }); 
}); 

Answer 2

沿着這些線路

東西：

$(document).ready(function() { 
    var colours = ['blue','green','red','orange']; 
    var colIndex = 0; 

    $('#logo').mouseover(function() { 
     if(colIndex > colours.length) { 
      colIndex = 0; 
     } 
     $(this).attr('src', colours[colIndex] + '-logo.jpeg'); 
     colIndex++; 
    }); 
}); 

• 初始化一個數組，並設置其元素 各種 標誌圖像文件的串前綴。
• 將一個計數器初始化爲零，所以我們 不需要做任何數學運算來使用它作爲數組偏移量。
• 當鼠標移過徽標 圖片時，將圖片的來源更改爲 存儲在 colours[colIndex]處的字符串。在我的示例中，I 已連接 的最後部分文件名，假設約定 [colour name]-logo.jpeg。您也可以將 放在數組中，並將整個文件名 放入數組中，而不要遵循任何約定。

Answer 3

我相信你的願望比其他答案張貼滿足要複雜一點 - 你希望圖像能夠順利淡化。此代碼在div中創建一個div，然後在mouseover上顯示內部（因此爲最高）div，將較低（最外層）div的背景更改爲循環中下一個div的背景，然後淡出較高圖像。它也有一個選擇性的鎖定機制，所以如果用戶用鼠標瘋狂，它不會以醜陋的方式使圖像閃爍。我希望這會有所幫助，並且如果您想要更深入地瞭解代碼的功能（大多數情況下您應該能夠閱讀它），請在評論中發佈。

此代碼有你的部分。

的Javascript：

var pos = 0, lockOut = 0; 
var fade = 600; // change this if you like (in MS) 
// fix these div names 
var top = '#my-transitional-div', bottom = '#my-permanent-div'; 
var images = [ // fix these paths 
    'http://example.com/1.png', 
    'http://example.com/2.png', 
    'http://example.com/3.png', 
    'http://example.com/4.png', 
    'http://example.com/5.png' 
]; 
$(document).ready(function() { 
    $(top).hide(); 
    $(bottom).css("background-image",'url(' + images[pos] + ')'); 
    $(bottom).live("mouseover",changeOut); 
    pos = images.length; 
    changeOut(); 
}); 

function changeOut() { 
    if (++lockOut > 1) { 
     lockOut--; 
     return; 
    } 
    $(top).css("background-image",'url('+images[pos-1]+')').show().fadeOut(fade); 
    if (pos >= images.length) pos = 0; 
    $(bottom).css("background-image",'url('+images[pos++]+')'); 
    setTimeout(function(){lockOut--;},fade-10); 
} 

CSS：

/* fix these div names (also height, width) */ 
#my-transitional-div { 
    width: 500px; 
    height: 250px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
#my-permanent-div { 
    position: relative; 
    width: 500px; 
    height: 250px; 
    margin: 0; 
    padding: 0; 
} 

HTML：

<div id="my-permanent-div"> 
    <!-- notice that the "transitional" div (var=top) is INSIDE the other --> 
    <div id="my-transitional-div"></div> 
</div> 

Answer 4

Hey Hey Dereleased。這是一個絕對的分度，頂部和左側欄=（下面的代碼：

的Javascript logo.js：

var pos = 0, lockOut = 0; 
var fade = 600; // change this if you like (in MS) 
// fix these div names 
var top = 'div#my-transitional-div', bottom = 'div#my-permanent-div'; 
var images = [ // fix these paths 
    'images/button_hover_blue.png', 
    'images/button_hover_yellow.png', 
    'images/button_hover_green.png', 
    'images/button_hover_pink.png', 
    'images/button_hover_orange.png' 
]; 
$(document).ready(function() { 
    $(top).hide(); 
    $(bottom).css("background-image",'url(' + images[pos] + ')'); 
    $(bottom).live("mouseover",changeOut); 
    pos = images.length; 
    changeOut(); 
}); 

function changeOut() { 
    if (++lockOut > 1) { 
     lockOut--; 
     return; 
    } 
    $(top).css("background-image",'url('+images[pos-1]+')').show().fadeOut(fade); 
    if (pos >= images.length) pos = 0; 
    $(bottom).css("background-image",'url('+images[pos++]+')'); 
    setTimeout(function(){lockOut--;},fade-10); 
} 

CSS的main.css：

html{ 
    height:100%; 
} 
body 
{ 
    height:100% 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-image:url(../images/bg.png); 
    background-repeat:repeat; 

} 

div#container 
{ 
    background-image:url(../images/bg.png); 
    text-align: left; 
    margin: auto; 
    width: 760px; 
    height:100%; 
    min-height:100%; 
    background-repeat:repeat; 
    position:relative; 
} 
div#logo{ 
    background-image:url(../images/logo.png); 
    background-repeat:no-repeat; 
    width:216px; 
    height:235px; 
    position:absolute; 
    right:45px; 
    top:5px; 
    z-index:12; 
} 
div#my-transitional-div { 
    background-repeat:no-repeat; 
    width:216px; 
    height:235px; 
    position:absolute; 
    right:45px; 
    top:5px; 
} 
div#my-permanent-div { 
    background-repeat:no-repeat; 
    width:216px; 
    height:235px; 
    position:absolute; 
    right:45px; 
    top:5px; 
} 

HTML的index.html：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="css/main.css" /> 
<title>om</title> 
<script type='text/javascript' src='js/effects/logo.js'></script> 
</head> 

<body> 
    <div id="container"> 
     <div id="logo"></div> 
     <div id="my-permanent-div"> 
     <div id="my-transitional-div"></div></div> 
</div> 
</body> 
</html>