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 仅设置高度或宽度之一应按比例缩放图像。如果你没有在 img 标签上设置高度和宽度属性，并且你只有一个用 CSS 设置的高度或宽度，那么图像将在 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剖析您的代码，这有点奇怪，因为您实际上加载了同一图像的两个副本。我不确定你为什么不只使用一个图像和它的 .load() 处理程序。

于 2011-09-19T14:54:09.610 回答