Question

我正在尝试创建一个可以全局使用的函数来为图像创建翻转状态。基本上，我希望能够为图像添加一个类，然后在翻转它时，jquery将使用相同的图像名称和相同的扩展名，但在文件名中添加“-over”。（我会有一个翻转状态的图像命名与非翻转状态相同，除了-over就可以了。我想出了这个，但它不起作用。我做错了什么或有没有人知道一个更好的方法吗？

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

图像：

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

谢谢！

编辑：有没有办法让它不是特定于文件时间，它可以找出任何文件类型而不仅仅是jpgs？

我正在使用：

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

而且效果很好

编辑2：我还可以添加活动状态（单击按钮时）吗？

Answer 1

拆分和连接应该按预期工作，你只需要将它设置回img的src属性：

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

此外，如果您希望它可以使用任何扩展名，您可以使用这样的正则表达式：

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

正则表达式匹配以句点后跟png, gif, jpg, or jpeg之一结尾的任何内容，并将其替换为第一部分（路径+文件名），字符串“-over”，句点和原始句点扩展

您可以通过从源中删除-over将其替换回原始状态：

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

jQuery().hover事件接受两个函数，第一个函数在您启动悬停时被调用，第二个函数在您退出悬停时被调用。

Answer 2

你只是没有对结果做任何事情。在这种情况下，您希望设置 src（可以通过几种方式完成），这是最有效的示例（不更改.split().join()方法）：

$('.btn').hover(function(){
  this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
  this.src = this.src.split("Over.jpg").join(".jpg");
});

Answer 3

$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})

Answer 4

您可能需要考虑使用纯CSS实现翻转效果。实际上没有必要将脚本包含在像图像翻转这样简单的东西中。另外，纯粹的CSS方法仍然适用于那些关闭脚本浏览的偏执狂。

使用:hover和:active伪类并利用CSS sprites。

这方面的缺点是这种方法难以普遍适用，因为您需要事先知道图像的大小。

使用jQuery创建按钮翻转

4 个答案: