Question

我做了一个非常简单的jQuery img翻转功能，灵感来自于这个： http://www.smileycat.com/miaow/archives/000224.php

只需检查名称中包含img的所有_off，然后将其与名称相同的img交换，而不是“_on”而不是“_off”。

由于我不能在布局中使用背景img，我觉得这是一个方便的解决方案。但我觉得交换不顺畅，就像功能运行缓慢一样。你怎么看？有没有办法优化它？

以下是代码：

    function roll_over() {
        $("img[src*='_off']").hover(
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_off", "_on");
                $(this).attr("src", stringa);
            },
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_on", "_off");
                $(this).attr("src", stringa);
            }
        );
    }

Answer 1

你的代码很糟糕。为什么呢？

当你有这样的图像时，它会失败：...src="/images/my_office.png"...
你使用JS来做一些原始的东西，可以在纯CSS中完成
*_on图片将在mouseover事件中加载，因此您暂时不会看到任何图片。

如何解决所有这些问题？使用CSS Sprites。

像这样创建图像：http://www.digart.pl/gfx/ico/s/fb.gif
HTML代码：<a href="..." id="myId">blah</a>（cource，您不必使用A元素。）

CSS代码：

#myId {
    display: inline-block; /* or block, or even inline with correct line-height */
    width: 33px;
    height: 20px;
    background: url(/path/to/img) 0 0 no-repeat;
}
#myId:hover {
    background-position: 50% 0;
}

如果你仍然希望自动化整个过程，那么只使用JS来改变背景位置而不是图像。

Answer 2

我在这里发现了一个很好的功能 http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

我只是指定了imgs的id或类

Answer 3

反复执行$("img[src*='_off']")效率低下。这意味着浏览器在翻转时必须搜索页面上的所有内容。您应该包含jQuery Lint以获取有关优化的信息......

Answer 4

如下：

// Add an image to your page as:
// <img src="button.png" class="rollover">

<script type='text/javascript'>
$(document).ready(function(){
    initRollovers();
});
function initRollovers() {  
    // Assign a class to the images you want to have as roll-over enabled.
    // Example:
    // <img src="button.png" class="rollover">
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script:
    var classIdentifier = ".rollover";

    // This example assumes that only the "on" state has a suffix:
    // button.png
    // button_on.png

    // If you have a suffix for both states, edit them here:
    // button_off.png
    // button_on.png
    // ... would be edited as:
    // var offSuffix = "_off.png";
    // var onSuffix = "_on.png";

    var offSuffix = ".png";
    var onSuffix = "_on.png";

    $(classIdentifier).each(function () {

        var obj = $(this);
        var mySrcOff = obj.attr("src");
        var mySrcOn = mySrcOff.replace(offSuffix, onSuffix);
        obj.mouseout(function() {
            $(this).attr("src", mySrcOff);
        });
        obj.mouseover(function() {
            $(this).attr("src", mySrcOn);
        });

        // Preload Off State
        $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none');

    });
}

</script>

非常简单的jQuery翻转

4 个答案: