0

我有一个菜单，在每个项目的鼠标悬停事件中，加载到第二个 div 的图像应该发生变化，并且 onMouseout 它应该替换为原始内容。

此时，我将原始内容保存到一个 var 中，并为每个菜单项创建一个 onMouseover 和 onMouseOut 事件。

查询：

 $(document).ready(function(){
    var heroSwap= $('#swapspace').html();

    $('#menu1').mouseover(function(){
        $('#swapspace').html('<img src="img/1.JPG"></img>');

    });
    $('#menu1').mouseout(function(){

        $('#swapspace').html(heroSwap);

    });
    .... ..*ETC  There are 7 More of these identical except for id*.. ....

});

问题：

  1. 有没有办法创建一个可以处理来自菜单标签的参数的通用函数？
  2. 会更容易..而不是交换 innerHTML img 标签来创建隐藏的 div，这些 div 由 onMouseover/onMouseout 事件显示/隐藏？

完整示例： 示例站点

4

3 回答 3

1

最好将图像 src 存储在data-src 属性中。这样您就不需要为每个图像使用多个变量。

然后你不需要改变 html，只需改变src属性就可以了。

首先替换你li使用class而不是id's

HTML

<ul class="nav nav-stacked nav-pills">
    <li class="menu" data-src="img/1.JPG"> <a href="#">Web Development</a> </li>
    <li class="menu" data-src="img/2.JPG"> <a href="#">Software Development</a></li>
    <li class="menu" data-src="img/3.JPG"> <a href="#">System Support</a></li>
    <li class="menu" data-src="img/4.JPG"> <a href="#">SEO</a></li>
    <li class="menu" data-src="img/5.JPG"> <a href="#">Social Media Marketing</a> </li>
    <li class="menu" data-src="img/6.JPG"> <a href="#">Project Management</a></li>
</ul>

Javascript

$(document).ready(function () {
    var $swapImg = $('img', '#swapspace'),
        defaultImage = 'default.jpg';

    $('.menu').on({
        mouseover: function () {
            $swapImg.attr('src', $(this).data('src'));
        },
        mouseout: function () {
             $swapImg.attr('src', defaultImage);
        }
    })
});

这样，您将只有一个事件处理程序来处理所有，而不是每个菜单项都有li's一个单独的处理程序。

于 2013-06-03T20:22:58.117 回答
1

您可以轻松创建通用函数。您可以在#menu1标签上添加一个带有图像 url 和类名的属性，如下所示：

 <li class='menu' data-src='img/1.JPG'></li>

然后像这样创建函数：

$('.menu').mouseover(function(){
    $('#swapspace').html('<img src="'+$(this).data('src')+'"></img>');

});
$('.menu').mouseout(function(){

    $('#swapspace').html(heroSwap);

});

至于你的第二个问题，我会简单地交换src你img而不是更改整个 HTML。

$('#swapspace').find('img').attr('src', $(this).data('src')); //on hover
$('#swapspace').find('img').attr('src', ''); //on out
于 2013-06-03T20:25:33.677 回答
1

实际上最好使用css。它也更容易。

背景可以是 css、url、颜色等中的任何内容。

<div id="menu1" class="menu-item"><div class="img"></div></div>
<div id="menu2" class="menu-item"><div class="img"></div></div>

续。

简单的js悬停使用mouseenter和mouseleave http://api.jquery.com/hover/

$(function() {

    $(".menu-item").hover(function() {
       $(this).addClass("hover"); 
    }, function() {
       $(this).removeClass("hover");
    });

});

然后用 css 标记你的图像：

.menu-item {
    margin: 0 0 5px 0;
}

.img {
    display: block;
    width: 200px;
    height: 30px;
    background: #ddd;
}

.menu-item.hover .img {
    background: #000;   
}

#menu2.hover .img {
    background: url("http://placehold.it/200x30") no-repeat;
}

#menu4.hover .img {
    background: url("http://placehold.it/200x30") no-repeat;
}

您也可以通过使用精灵表而不是 javascript 在后台加载图像来预加载图像。

http://jsfiddle.net/E6xtq/1/

于 2013-06-03T21:34:46.253 回答