JQuery - 在悬停

Question

我有一个图片文件夹。在这个文件夹中，我有两种类型的图像;一个png和一个gif。显示的图像是png版本。在图像悬停时，我需要将其替换为gif版本。当悬停时，将png版本放回原位。

我目前有以下工作

$(".image-container").mouseover(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".gif");
}).mouseout(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".png");
});

它有效，但我不喜欢我重复的方式。有什么方法可以提高效率吗？

由于

Answer 1

我想说，以更好的方式使用data-*属性。我建议你有这样的事情：

<img src="img.png" data-src="img.png" data-hover="img.gif" alt="" class="image-container" />

在jQuery中：

$(".image-container").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
});

或者简而言之，您也可以使用.replace()。您不需要 regex进行此简单替换：

$(".image-container").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace(".png", ".gif"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace(".gif", ".png"));
});

Answer 2

如果您展开选择器以包含img，则可以使用$(this)来引用它。如果您只是用gif替换png（反之亦然），那么使用正则表达式很容易做到这一点。

$(".image-container img").mouseover(function (e) {    
    $(this).attr('src', $(this).attr('src').replace(/\.png$/, '.gif'));
}).mouseout(function (e) {
    $(this).attr('src', $(this).attr('src').replace(/\.gif$/, '.png'));
});

修改：另请参阅Praveen Kumar's answer，以获取在data-属性中声明文件名的一个很好的建议。

Answer 3

使用css :hover

＆＃13;

＆＃13;

.image-container {
  display:block;
  width: 50px;
  height: 50px;
  background: url(http://lorempixel.com/50/50/nature)
              , url(http://lorempixel.com/50/50/cats);
  background-size: 100% 100%, 0% 0%;
}

.image-container:hover {
  background-size: 0% 0%, 100% 100%;
}

＆＃13;

<div class="image-container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只是另一种解决方案，

您还可以使用事件处理程序委派并将参数传递给它。

<强> E.g。

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    var imgSrc = $img.attr('src');
    var toImg = imgSrc.substring(0, imgSrc.lastIndexOf(".")) + '.' + ev.data.ext;
    $img.attr('src', toImg)
}

$(".image-container")
    .on('mouseover', { ext: 'gif'}, replaceImageHandler)
    .on('mouseout', { ext: 'png'}, replaceImageHandler);

如果要附加更多事件处理程序，也可以执行此操作。

<强> E.g。

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    $img.attr('src', ev.data.src);
}

$(".image-container")
    .on('click', { src: 'zoom-my-image.gif'}, replaceImageHandler)
    .on('mouseover', { src: 'my-image-1.gif'}, replaceImageHandler)
    .on('mouseout', { src: 'my-image-2.png'}, replaceImageHandler);

Answer 5

通过css实现此更好的方法

attr