несколько мыши с jquery?

Question

Предположим, у меня есть div с backgroundimage (мой логотип), и мне нужно, чтобы этот div был переключен с другими 4 divs, которые являются одним и тем же изображением, но с другими цветами. Каждое изображение будет вызываться на мыши, используя эффект jquery, чтобы он отображался плавно, порядок будет div1,2,3,4,5, а затем перезапускается.

Более легкое объяснение - это логотип, который имеет 5 разных цветных фона, и каждый цвет фона будет отображаться, когда вы наводите указатель мыши на логотип, например, если вы передадите его в первый раз, когда он будет зеленым, но если u снова наведите указатель мыши на логотип, он будет синим и так далее.

Теперь, как совершенно новичок в javascript и jquery ... как я могу это достичь? может ли кто-нибудь вести меня через какой-то учебник или конкретную статью или, может быть, дать мне отскок, если код начнется? Я попытался спросить об этом раньше, и кто-то ответил с текстом кода, который был бы переменной (счетчик точно), но я действительно не понимал, как это работает и как его реализовать ...

Answer 1

Вы могли бы просто сделать на логотип GIF/PNG с прозрачностью и установить его в качестве фона и затем анимируйте атрибут backgroundColour 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, а затем, при наведении курсора мыши, показывает внутренний (и, следовательно, самый верхний) 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 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>