Question

**我创建这两个代码第一个代码没有用，显示翻转不好，例如我把第一个图标鼠标放在显示我其他图标没有第一个图标结束，例如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>

Answer 1

这对你有用。您可以在控制台中查看其尝试查找图像的位置。 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)'})  
    });
})

Jquery翻转问题没有显示我正确的图像

1 个答案: