0

**我创建这两个代码第一个代码不起作用，显示翻转错误，例如，当我把第一个图标鼠标放在上面时，显示其他图标没有第一个图标，例如 icon_1 和鼠标放在 icon_1_down 上，例如 icon_5_down **

<script> 
$(function() {
    var number_menus = 9;
    for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        $(".wm_" + i).mouseover(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
            alert("this_down.png");
        });
        $(".wm_" + i).mouseout(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        });
    }
});​
</script>

HTML 

 <div id="web_footer_publi">
 <div id="web_footer_marks" class="wm_1"></div> <div
 id="web_footer_marks" class="wm_2"></div> <div id="web_footer_marks"
 class="wm_3"></div> <div id="web_footer_marks" class="wm_4"></div>
 <div id="web_footer_marks" class="wm_5"></div> <div
 id="web_footer_marks" class="wm_6"></div> <div id="web_footer_marks"
 class="wm_7"></div> <div id="web_footer_marks" class="wm_8"></div>
 <div id="web_footer_marks" class="wm_9"></div>
 </div>

我的第二个代码有效，但是当我查看图标时 - 当显示这些图标时 - 显示延迟，或多或少一秒显示图标 

<script>
$(function() {
    for (i = 1; i <= 9; i++) {
        $(".wm_" + i).show(1000).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
    }
});
function footer(id) {
    $(function() {
        $(".wm_" + id).hover(function() {
            $(this).show().css("background-image", "url(imagenes/footer/m/" + id + "_down.png)");
        });
        $(".wm_" + id).mouseout(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + id + ".png)");
        });
    });
}​
</script>

HTML

 <div id="web_footer_publi">
 <div id="web_footer_marks" class="wm_1"
 Onmouseover="javascript:footer('1')"></div> <div id="web_footer_marks"
 class="wm_2" Onmouseover="javascript:footer('2')"></div> <div
 id="web_footer_marks" class="wm_3"
 Onmouseover="javascript:footer('3')"></div> <div id="web_footer_marks"
 class="wm_4" Onmouseover="javascript:footer('4')"></div> <div
 id="web_footer_marks" class="wm_5"
 Onmouseover="javascript:footer('5')"></div> <div id="web_footer_marks"
 class="wm_6" Onmouseover="javascript:footer('6')"></div> <div
 id="web_footer_marks" class="wm_7"
 Onmouseover="javascript:footer('7')"></div> <div id="web_footer_marks"
 class="wm_8" Onmouseover="javascript:footer('8')"></div> <div
 id="web_footer_marks" class="wm_9"
 Onmouseover="javascript:footer('9')"></div>
</div>
4

1 回答 1

0

这应该适合你。您可以在控制台中看到它试图查找图像的位置。jsFiddle

$('#web_footer_publi div').each(function(){
    var itemNum = $(this).attr('class').replace('wm_','');
    $(this).css({'background-image':'url(imagenes/footer/m/' + itemNum   + '.png)'}) 
    $(this).mouseenter(function(){
        $(this).css({'background-image':'url(imagenes/footer/m/' + itemNum  + '_down.png)'})  
    }).mouseleave(function(){
        $(this).css({'background-image':'url(imagenes/footer/m/' + itemNum   + '.png)'})  
    });
})​
于 2012-09-25T20:47:29.980 回答