更好的方式來中心縮放圖像？

我放在一起的一個小jquery函數來放大和縮小mouseover上的圖像，同時保持約束框的大小不變。更好的方式來中心縮放圖像？

它的偉大工程，但如果你很快輕搖光標的圖像之間，它會失控。腳本在中等縮放時不正確地存儲大小。我試過在公式中加入.stop()，但似乎無法修復這個故障。

我猜我應該存儲的數據.each()而不是鼠標懸停，但我不知道如何做到這一點。

任何想法？

2012-02-05 neokio

$('.pixbox img').on({ 
    mouseover: function(){ 
     var $scale = 1.5; 
     if (!$(this).data('w')) 
     { 
      $(this).data('w', $(this).width()) 
        .data('h', $(this).height()); 
     } 
     $(this).stop(true).animate({ 
      width: $(this).data('w')*$scale, 
      height: $(this).data('h')*$scale, 
      left: -$(this).data('w')*($scale - 1)/2, 
      top: -$(this).data('h')*($scale - 1)/2 
     }, 'fast'); 
    }, 
    mouseout: function(){ 
     $(this).stop(true).animate({ 
      width: $(this).data('w'), 
      height: $(this).data('h'), 
      left: 0, 
      top: 0 
     }, 'fast'); 
    } 
});

來源

2012-02-05 07:36:23 Cheery

我看你在那裏做了什麼;）太棒了！ – neokio 2012-02-05 15:17:24

最終版本在這裏：http://jsfiddle.net/q9jHu/5/ – neokio 2012-02-06 04:36:08

最終版本仍凍結我的電腦。 – 2012-04-16 20:24:19

最簡單的一種是改變

var $w = $(this).width(); 
var $h = $(this).height();

到

var $w = 120; 
var $h = 180;

//靜態值

但是C heery的解決方案是最佳

來源

2012-02-05 07:46:35

更好的方式來中心縮放圖像？

回答

相關問題