jQuery，悬停时图像发生变化

jQuery, image changing on hover

本文关键字：变化 图像 悬停 jQuery      更新时间：2023-09-26

好吧，所以我已经通过PHP动态生成了图像，所以不一定会产生相同的图像。在过去的四个小时里，我浏览了互联网，尝试了无数使用jQuery和/或CSS的东西，我想出了以下有效的方法。

    <a href="build.php?x=1875&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1876&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1877&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1878&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1879&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>

Market.png有一个透明的背景。

现在，上面的工作。在mouseover上，它显示Market.png，透明背景部分为tile_4.jpg，在mouseout上显示tile_4..jpg。

我想知道的是：有没有任何方法可以用jQuery或CSS完成与上面完全相同的事情？我还没有弄清楚，我花了几个小时尝试，但如果可能的话，我宁愿做其他事情，因为上面的格式（大量重复，目前重复了大约100次，但我计划将其扩展到1000多次）将成为带宽占用者。

您可以为每个<img />元素添加一个类，例如"xyz"（请选择一个更好的名称），然后利用hover（）函数。假设您的图像是动态的，您可以使用额外的数据属性来渲染图像标记，作为"备用"或"悬停"图像源。最后，您可能会呈现这样的东西：

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

然后，要为每个图像应用切换功能，您可以编写一个小函数，在悬停入/悬停出时交换图像src属性和data-alt-src属性：

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

然后，它就像直接使用一点点jQuery事件绑定执行函数一样简单：

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

下面是一个工作示例（版本1）：

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }
    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

以下是Andres Separ在评论中的例子。使用此选择器，您不需要使用标记类来装饰图像。它还将预加载备用源图像，以帮助消除悬停时的任何滞后或闪烁：

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 
});

这是第二个版本：

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }
    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

jQuery

您可以使用mouseover和mouseout事件：

$("img").on({
 "mouseover" : function() {
    this.src = 'images/Market.png';
  },
  "mouseout" : function() {
    this.src='images/tile_4.jpg';
  }
});

通过这种方式，您可以从HTML中去掉属性onmouseout和onmouseover，并使代码整洁。

CSS

然而，最简单的方法是使用CSS：

img {
  background-image: url('images/tile_4.jpg');
}
img:hover {
  background-image: url('images/Market.png');
}

当然，使用jQuery很容易。

$('img').hover(function(){
    $(this).attr('src','images/Market.png');
},function(){
     $(this).attr('src','images/tile_4.jpg'); 
});
相关文章：