0

ツールチップ用に次のコードがあります-Fxで完全に機能します

http://jsfiddle.net/mplungjan/jkCKh/（使用されている画像はデモ用です）

コードの目的は、150ピクセルを超える幅や高さを持たず、マウスオーバー時に元のサイズを表示することです。

var imgUrl = "http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg";
var idx=1;
var imageObject = $('<img/>').load(function(){
  var w = this.width;
  var h = this.height;
  var orgSize = {width:w,height:h};
  var imgId = "thumb_"+idx;
  var actualImage = $('<img/>')
    .attr("id",imgId)
    .attr("src",imgUrl)
    .addClass("thumb")
    .data("orgSize",orgSize);

  // set EITHER width OR height if either is > 150
  if (w<h && w>150) actualImage.attr("width",150);
  else if (w>h && h > 150) actualImage.attr("height",150);
  $('.qTip2Image').append(actualImage);
}).attr("src",imgUrl);


var cont_left;
$("img.thumb")
 .live("mouseenter",function() {
    // save this scaled down image size for later
    $(this).data("newSize",{width:this.width,height:this.height})
    $(this).animate({
      width: $(this).data("orgSize").width,
      height: $(this).data("orgSize").height,
      left: "-=50",
      top: "-=50"
    }, "fast");
  })
 .live("mouseleave",function() {
    $(this).animate({
      width: $(this).data("newSize").width,
      height: $(this).data("newSize").height,
      left: "+=50",
      top: "+=50"
    }, "fast");
 });

アスペクト比を維持しながら、ほとんどのブラウザで同じようにサイズを縮小するにはどうすればよいですか？

比率を実際に計算する必要がある場合は、エレガントな計算を投稿してください。

4

1 に答える 1

1

次のようにCSSを使用して高さと幅を設定してみてください。

actualImage.css("height", 150).

imgタグのheightおよびwidth属性を使用しません。CSSで高さまたは幅のいずれか1つだけを設定すると、画像が比例して拡大縮小されます。imgタグに高さと幅の属性が設定されておらず、CSSで設定されている高さまたは幅の属性が1つしかない場合、画像はIEで比例して拡大縮小されます。

画像から高さと幅の属性を明確に削除し、次のようにCSSを使用するように高さと幅の設定を変更すると、コードを機能させることができます。

var imgUrl = "http://c487397.r97.cf2.rackcdn.com/wp-content/uploads/2011/09/TallCat.jpg";
var idx=1;
var imageObject = $('<img/>').load(function(){
  var w = this.width;
  var h = this.height;
  var orgSize = {width:w,height:h};
  var imgId = "thumb_"+idx;
  var actualImage = $('<img/>')
    .attr("id",imgId)
    .attr("src",imgUrl)
    .addClass("thumb")
    .removeAttr("height")
    .removeAttr("width")
    .data("orgSize",orgSize);

  // set EITHER width OR height if either is > 150
  if (w<h && w>150) actualImage.css("width",150);
  else if (w>h && h > 150) actualImage.css("height",150);
  $('.qTip2Image').append(actualImage);
}).attr("src",imgUrl);


var cont_left;
$("img.thumb")
 .live("mouseenter",function() {
    // save this scaled down image size for later
    $(this).data("newSize",{width:this.width,height:this.height})
    $(this).animate({
      width: $(this).data("orgSize").width,
      height: $(this).data("orgSize").height,
      left: "-=50",
      top: "-=50"
    }, "fast");
  })
 .live("mouseleave",function() {
    $(this).animate({
      width: $(this).data("newSize").width,
      height: $(this).data("newSize").height,
      left: "+=50",
      top: "+=50"
    }, "fast");
 });

IEで機能することをここで確認できます：http：//jsfiddle.net/jfriend00/jkCKh/7/。

参考までに、CSSの高さと幅の両方を設定し、適切なアスペクト比を維持するために一方を他方から計算することも可能です。

PSコードを分析すると、基本的に同じ画像の2つのコピーをロードするので、少し奇妙です。.load（）ハンドラーで1つの画像を使用しない理由がわかりません。

于 2011-09-19T14:54:09.610 に答える