0

我受此启发 做了一个非常简单的jQuery翻转函数： http ://www.smileycat.com/miaow/archives/000224.php 。img

它只是检查名称img中包含_off的所有 s 并将它们交换为img具有相同名称但“_on”而不是“_off”的名称。

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

这是代码：

    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);
            }
        );
    }
4

4 回答 4

2

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

  1. 当你有这样的图像时它会失败：...src="/images/my_office.png"...
  2. 您将 JS 用于可以在纯 CSS 中完成的非常原始的事情
  3. 图像将*_on在mouseover事件中加载，因此您暂时看不到任何图像。

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

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

  3. 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 来更改背景位置而不是图像。

于 2010-03-12T14:31:52.300 回答
1

我在这里找到了一个很好的功能 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或class

于 2010-03-13T12:57:47.337 回答
0

重复做$("img[src*='_off']")是低效的。这意味着当您翻滚时，浏览器必须搜索页面上的所有内容。您应该包括jQuery Lint以获取有关优化的信息...

于 2010-03-12T14:18:43.430 回答
0

怎么样：

// 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>

.

于 2012-08-11T07:30:25.283 回答