从中心放大图像的百分比？

对于使用jQuery的网站，页面上有一些图形，点击时会在网站的另一部分显示信息。当被淹没时，图像从中心扩展一个百分比。问题在于，当您快速进出鼠标（动画完成之前）时，图像无法正确调整大小。（他们变得更小）从中心放大图像的百分比？

$(".locationimg").hover(
     function(){ 
      var height = $(this).height() 
      var width = $(this).width() 
      var top = $(this).position().top 
      var left = $(this).position().left 
      $(this).stop().animate({ 
       height: height*1.1 + 'px', 
       width: width*1.1 + 'px', 
       top: top - (((height*1.1)-height)/2) + 'px', 
       left: left - (((width*1.1)-width)/2) + 'px' 
      }); 
     }, 
     function(){ 
      var height = $(this).height() 
      var width = $(this).width() 
      var top = $(this).position().top 
      var left = $(this).position().left 
      var height1 = height/1.1 
      var width1 = width/1.1 
      $(this).stop().animate({ 
       height: height1 + 'px', 
       width: width1 + 'px', 
       top: top - (((height1)-height)/2) + 'px', 
       left: left - (((width1)-width)/2) + 'px' 
      }); 
     } 
    );

如果这些变量可以再进.hover（定义），这将是容易的，因为调整图像大小，简直是“高度：高度”等等。这样做的问题是有几个图像都需要这样做，所以变量需要在.hover（）中定义。

来源

2012-01-30 mboisseau

尝试使用stop(false, true)而不仅仅是stop()。这意味着动画将在新动画开始之前“完成”。

此外，您可以使用data()函数在元素上存储高度和宽度。

来源

2012-01-30 20:18:45

之前悬停（），你可以存储每个数据的原始和缩放尺寸和位置属性的图像本身：而不是试图计算在

$(".locationimg").each(function() { 
    var $this  = $(this), 
     origWidth = $this.width(), 
     origHeight = $this.height(), 
     zoomWidth = origWidth * 1.1, 
     zoomHeight = origHeight * 1.1, 
     pos  = $this.position(), 
     origTop = pos.top, 
     origLeft = pos.left 
     // ... also find zoomed top, left... 
    ; 
    $this.data({ 
     "origwidth": origWidth, 
     "origHeight": origHeight, 
     "zoomWidth": zoomWidth, 
     "zoomHeight": zoomHeight 
     /* etc. */ 
     /* ... also store top and left... */ 
    }); 
}).hover(
    // your hover code here 
)

然后悬停处理程序中，飞，您可以只读取已存储的尺寸/位置，并在鼠标悬停时转换为缩放的尺寸，或在鼠标悬停时转换为原始尺寸。这也会快很多。

来源

2012-01-30 20:19:39 glomad

从中心放大图像的百分比？

回答

相关问题