javascript - jQuery：将文本字符串添加/删除到 src 属性

Question

我正在尝试将一串文本附加到src图像的属性上mouseover，然后删除该字符串mouseout。现在我有一半的工作：

Javascript

$('.singleSidebar .subnav img').mouseover(function(){
    $(this).attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '_anim$&');
    });
});

我在其他地方找到了这段代码，所以我不确定如何修改它以_anim删除mouseout.

Answer 1

我建议只加载两张图片，然后只显示你想要的一张。这一切都可以通过 CSS 来完成。

给一个图像一类“动画”和另一类“非动画”。添加此 CSS 以处理悬停更改：

    .singleSidebar .subnav img.animated,
    .singleSidebar .subnav img.nonanimated:hover
    {
        display: none;
    }
    .singleSidebar .subnav img.animated:hover,
    .singleSidebar .subnav img.nonanimated
    {
        display: block
    }

这会更好，因为浏览器会立即加载图像，而不是当您将鼠标悬停时，它也更清洁 IMO

编辑啊，如果您需要他们在悬停时开始播放，那么您需要按照自己的方式进行。尝试这样的事情：

$('.singleSidebar .subnav img').each(function(e){
    var src = $(this).attr('src');
    $(this).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });

​</p>

Answer 2

$(".singleSidebar .subnav img").hover(
  function () {
    $(this).attr('src', function(index, attr) {
      return attr.replace(/\.[^.]*$/, '_anim$&');
    });
  }, 
  function () {
    $(this).attr('src', function(index, attr) {     
        return attr.replace('_anim', ''); // or any other replace
    }); 
  }
);

有关更多信息，请参阅http://api.jquery.com/hover/

Answer 3

http://jsfiddle.net/dZ3c2/1/

var src;
$("img").hover(function() {
     src = $(this).attr("src");
    $(this).attr("src", "replacementsrc");
},function() {
     $(this).attr("src", src);
});​

Answer 4

应该能够使用 .mouseout 并反转替换。

$('.singleSidebar .subnav img').mouseout(function(){     
    $(this).attr('src', function(index, attr) {     
        return attr.replace(/_anim$/, '');     
    }); 
});