Question

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

现在我遇到的问题是，当鼠标第二次进入时，图像再次缩小。第三次它变得比第二次小......所以每次鼠标进入，图像变得越来越小...... （我认为这是显而易见的，因为每次鼠标都会使图像减少75％......）我尝试过很多东西，比如创建一个全局变量，并检查它..如果（第一次）那么（减少）其他（减少）从原始图片）。

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

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必须找到该元素。如果你这样做很多，它会影响性能。因此，将选择器保存在局部变量中是一种很好的做法。

Answer 2

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

它不使用自定义属性。它只是在mouseleave中撤消，你在mouseenter中做了什么

Answer 3

每次调用此代码

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

div.tooltip的宽度值乘以0.75。

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

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

鼠标中心动态高宽图像问题及鼠标功能

3 个答案: