jquery图像切换

我正在使用Jquery中的图像切换功能来创建我正在构建的网站。有很多项目，所以我正在大量压缩这些图像。然而，其中一些作为.gifs看起来不错，它确实只适用于制作.jpg。jquery图像切换

我的问题是，此代码只能将一个图像交换到另一个不同名称但具有相似前缀的图像。有没有办法只交换文件的名称，以便如果我有.gif或.jpg，那么它不会影响，因为它只是将名称从_static替换为_rollover？

这里是我使用的代码：

//Image Switch 
$(document).ready(function(){ 
    $(".projectThumb img").hover(
      function(){ 
        var iconName = $(this).attr("src"); 
        var origin = iconName.split("_static.")[0]; 
        $(this).attr({src: "" + origin + "_rollover.gif"}); 
      }, 
      function(){ 
        var iconName = $(this).attr("src"); 
        var origin = iconName.split("_rollover.")[0]; 
        $(this).attr({src: "" + origin + "_static.gif"}); 
      }); 
});

和图像切换

<div class="projectThumb"> 
    <img src="/img/mr_button_static.gif" class="button" name="mr"> 
    <p class="title">Title &ndash; Poster</p> 
</div>

该图片的HTML被切换名为/img/mr_button_rollover.jpg

谢谢！

来源

2009-09-06 antonanton

只需使用字符串替换来在图像名称中的静态和翻转之间进行切换。

//Image Switch 
$(document).ready(function(){ 
    $(".projectThumb img").hover(
      function(){ 
        var iconName = $(this).attr("src"); 
        var rollover = iconName.replace(/static/, 'rollover'); 
        $(this).attr({ src: rollover }); 
      }, 
      function(){ 
        var iconName = $(this).attr("src"); 
        var static = iconName.replace(/rollover/, 'static'); 
        $(this).attr({ src: static }); 
      }); 
});

如果有，你可以在静态图像前缀/侧翻的可能性，只需在搜索中包括下划线和替换字符串和匹配/文件扩展名前更换点。

来源

2009-09-06 15:01:04 tvanfosson

这似乎很简单。它适用于所有.gif文件，但.jpg文件不会切换... 以下是一个示例... http://samuelfarfsing.com/columns.php 如果您查看“JPEG SWITCH”一个，这是不会切换的... – antonanton 2009-09-06 16:28:36

翻转和静态图像都需要GIF或JPEG格式才能使用。如果您希望能够切换为JPEG格式的GIF，那么您在标题中还需要一些额外的数据，以便能够确定何时更改扩展名。如果您不关心使用标准HTML，您还可以使用自定义属性来确定翻转图像应具有的扩展名。我会去简单的方向，让他们都是相同的类型。 – tvanfosson 2009-09-07 13:44:09

jquery图像切换

回答

相关问题