0

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

现在我面临的问题是，当鼠标第二次进入时，图像再次缩小..第三次变得比第二次小......所以每次鼠标进入时，图像变得越来越小......（我认为是显而易见的，因为每次鼠标进入它都会将图像减少 75％......）我已经尝试了很多事情，比如创建一个全局变量，并检查它.. if（第一次）thn（减少）else（从原来的减少图片 ）。

但不能让它工作..这是我的代码....

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

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

谢谢。

4

3 回答 3

2

我试图尽可能少地更新您的代码。这是一个如何做我认为你正在尝试做的事情的例子。 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 都必须查找该元素。如果你经常这样做，它会影响性能。因此，最好将选择器保存在局部变量中。

于 2012-10-15T14:37:11.690 回答
1

http://jsfiddle.net/ugnNU/13/

它不使用自定义属性。它只是在 mouseleave 中撤消，您在 mouseenter 中所做的

于 2012-10-15T14:39:03.277 回答
-1

每次调用此代码

    var hoverImgWidth = $(this).children("div.tooltip").width();
    var finalHoverImagewidth = hoverImgWidth * 0.75;

div.tooltip 的宽度值乘以 0.75。

下次执行代码时，它会获取当前宽度（降低的值）并再次降低它。

您可以在隐藏它时再次设置大小，但我的建议是计算文档准备好的值，并且仅使用 mouseenter 和 mouseleave 事件显示和隐藏图像。

于 2012-10-15T14:38:12.640 回答