javascript - mouseenter 和 mouseleave 函数上的动态高度和宽度图像的问题

Question

我正在使用 jquery 处理此图像悬停缩放部分。这些代码工作正常，因为更大的图像显示在 mouseenter 上并隐藏在 mouseleave 上。因为，悬停时显示的图像可以具有动态宽度和高度(这取决于图像大小..)我想将图像宽度和高度减小到实际宽度和高度的 75%.. 即使这样也很好并且可以工作..

现在我面临的问题是，当鼠标第二次进入时，图像再次缩小......第三次它变得比第二次小......所以每次鼠标进入时，图像变得越来越小...... (我认为这是显而易见的，因为每次鼠标进入时，图像都会减少 75％...)我尝试了很多事情，例如创建全局变量，然后 checkin 它.. if(第一次)thn(减少)else(减少来自原始图像)。

但无法使其工作..这是我的代码....

http://jsfiddle.net/ugnNU/11/

希望得到一些建议。我们将不胜感激您的帮助。

谢谢。

Answer 1

我尝试尽可能少地更新您的代码。这是一个如何做我认为你想做的事情的例子。 http://jsfiddle.net/ugnNU/12/

有很多方法可以到达那里，我选择这个是因为它接近你已经拥有的。

我添加了这个:

var childImage = $(this).children("div.tooltip");

if (childImage.attr('saveWidth') == ""){
   //we haven't saved it's height yet
   childImage.attr('saveWidth', childImage.width()); 
   childImage.attr('saveHeight', childImage.height());
}

var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;

var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;

基本上，它只是检查我们是否已经将“工具提示”图像高度保存在属性内。如果有，它只会使用该值。但如果没有，我们将高度或宽度保存在该属性中，然后使用它。

我也只选择 ("div.tooltip") 一次并将其保存在 childImage 中。这样做的原因是每次执行此 $(selector) jQuery 都必须去查找该元素。如果您经常这样做，可能会影响性能。因此，最好将选择器保存在本地变量中。