使用 jQuery 创建按钮翻转答案

【问题标题】：Creating button rollovers with jQuery使用 jQuery 创建按钮翻转
【发布时间】：2011-01-04 03:55:07
【问题描述】：

我正在尝试创建一个可以全局使用的函数来为图像创建翻转状态。基本上，我希望能够向图像添加一个类，然后当你翻转它时，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：我还可以添加一个活动状态（单击按钮时）吗？

【问题讨论】：

要为点击做类似的事情，您可以将我下面答案中的代码挂接到 .mousedown（用于添加 -over）和 .mouseup（用于删除 -over）

标签： javascript jquery rollover

【解决方案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 事件接受两个函数，第一个在您开始悬停时调用，第二个在您退出悬停时调用。

【讨论】：

你的回答真聪明！

【解决方案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");
});

【讨论】：

试过了，当我翻转图像时没有任何变化
@Phil - 这是在 document.ready 处理程序中。所以$('.btn') 选择器在元素存在于 DOM 之后运行？
我认为这是因为我在 jquery 文件调用上方有该代码，并且它说 $.... 没有定义
是的……这就是问题所在。现在工作

【解决方案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");
})

【讨论】：

【解决方案4】：

您可能需要考虑使用纯 CSS 实现翻转效果。确实没有必要让脚本参与像图像翻转这样微不足道的事情。另外，纯 CSS 方法仍然适用于那些在关闭脚本的情况下浏览的偏执狂。

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

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

【讨论】：