2

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

4

4 回答 4

3

拆分和加入应该按预期工作，您只需将其设置回 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事件接受两个函数，第一个在您开始悬停时调用，第二个在您退出悬停时调用。

于 2011-01-03T18:53:13.343 回答
1

你只是没有对结果做任何事情。在这种情况下，您要设置（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");
});
于 2011-01-03T18:53:53.453 回答
0 
$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})
于 2011-01-03T18:54:10.193 回答
0

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

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

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

于 2011-01-03T19:53:30.640 回答