0

假设我有一个带有背景图像（我的徽标）的 div，我需要将此 div 与其他 4 个相同图像但颜色不同的 div 切换。每个图像都将使用 jquery 效果在鼠标悬停时调用，因此它会平滑显示，顺序为 div1、2、3、4、5，然后重新启动。

一个更简单的解释是..一个具有 5 种不同颜色背景的徽标，当您将鼠标移到徽标上时，每种背景颜色都会显示，就像您第一次通过它时它会是绿色的，但如果您通过鼠标再次超过标志，它将是蓝色的，依此类推。

现在作为 javascript 和 jquery 的完全新手......我怎样才能做到这一点？有人可以通过一些教程或特定文章指导我，或者如果代码开始，可以给我一个片段吗？我之前曾试图问过这个问题，有人回答了一段代码，该代码将是一个变量（确切地说是一个计数器），但我并不真正了解它是如何工作的以及如何实现它......

4

4 回答 4

1

这些方面的东西：

$(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. 您也可以将整个文件名放入数组中，而不遵循任何约定。
于 2009-11-14T01:05:52.877 回答
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++;
    });
});
于 2009-11-14T04:11:02.113 回答
0

我相信您的愿望比发布的其他答案要复杂一些-您希望图像平滑淡化。此代码在 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>
于 2009-11-14T01:47:21.670 回答
0

嘿释放。这是一个带有顶部和左侧字段的绝对 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 索引.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>
于 2009-11-14T10:09:13.517 回答