несколько указателей мыши с помощью jquery?

Question

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

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

Теперь, как новичок в 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]. В моем примере я сцепили последнюю часть имя файла, при условии соглашения [colour name]-logo.jpeg. Вы могли бы точно так же положите все имя файла в массиве и не следовать никаким соглашениям.

Answer 3

Эй, Dereleased. Это абсолютный div с верхним и левым полями = (вот код:

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>

Answer 4

Я считаю, что ваше желание немного сложнее, чем другой опубликованный ответ - вы хотите, чтобы изображения плавно исчезали. Этот код создает 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>