2

「-hover」画像 (ロールオーバー効果) の正確なファイル パス ディレクトリを指定するにはどうすればよいですか? 現在、これは子ディレクトリにある画像に対してのみ機能します。

$(function(){
  $('.box-img').append('<span></span>').hover(
    function(){
      $(this).find('img').stop().animate({opacity:0})
    }, function(){
      $(this).find('img').stop().animate({opacity:1})
    }
  ).each(function(){
    var src=new Array()
    src=$(this).find('img').attr('src').split('.')
    src=src[0]+'-hover.'+src[1]
    $(this).find('>span').css({background:'url('+src+')'})
  });
})
4

2 に答える 2

3

私はcssプロパティでスプライトを使用するthe background-positionのが好きですが、次を使用してこれを試すことができますRegExp:

$(document).ready(function(){
   // Change the image of hoverable images
   $(".imgHoverable").hover( function() {
       var hoverImg = HoverImgOf($(this).attr("src"));
       $(this).attr("src", hoverImg);
     }, function() {
       var normalImg = NormalImgOf($(this).attr("src"));
       $(this).attr("src", normalImg);
     }
   );
});

function HoverImgOf(filename)
{
   var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1-hover.$2");
}
function NormalImgOf(filename)
{
   var re = new RegExp("(.+)-hover\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1.$2");
}
于 2012-10-29T18:30:00.133 に答える
1

basenamefromを使用しjquery.utilsて、 からベース名を抽出できますsrc。次に、ベース名を「.」で分割し、「-hover」を追加して、パスを再構築します。したがって、「../../css/images/image.png」などの名前について心配する必要はありません。

または、「/」で分割してから、配列の最後の要素をベース名として取得し、「.」で分割した要素を取得することもできます。

var src=new Array()
// path/to/filename.jpg
src=$(this).find('img').attr('src').split('/')

var bname = src.pop()   // bname is now filename.jpg, src is { path to }
var bco=new Array()     
bco = bname.split('.')  // bco is now { filename jpg }
ext = bco.pop()         // ext is jpg, bco is { filename }
nam = bco.pop()         // nam is filename, bco is { }

bco.push(nam + '-hover') // bco is { filename-hover }
bco.push(ext)            // bco is { filename-hover jpg }

bname = bco.join('.')   // bname is now filename-hover.jpg

src.push(bname)

srcString = src.join('/')

また、ベース名にドットを含むファイルの命名方法 (「ubuntu-12.02.jpg」など) と、分割配列の再構築方法にも注意する必要があります。

于 2012-10-29T18:12:29.273 に答える