定心作用

Question

我有以下代碼：

http://jsfiddle.net/G8Ste/577/

但我想，而不是僅僅在右側和底部在各個方向去的效果。

我已經嘗試使用margin：0，auto和其他css和html樣式，以便將其與中心對齊，但它不起作用。

謝謝

Answer 1

以下的jsfiddle將集中的另一內部並且被調整大小時，將所述父容器內停留了中心一個框。我認爲這是你試圖達到的效果。我使用負邊距來保持內框居中。無論您使用的是什麼高度/寬度，只需將邊距設置爲寬度/高度的一半即可。

http://jsfiddle.net/G8Ste/594/

編輯：

我更新了上面的jsfiddle處理相對大小。 mousedown函數內有2個變量，用於確定框的比例。 scaleDown是您想縮小到mouseDown的原始大小的百分比，並且放大比例是您想要在mouseUp上放大的原始大小的百分比。這應該適用於任何大小的盒子，因爲所有的值都是計算而不是硬編碼的。

http://jsfiddle.net/G8Ste/600/

EDIT2：

現在的代碼檢查，如果迅速多次點擊廣告時被動畫的框。該代碼將等待，直到先前的動畫完成再次動畫之前。

http://jsfiddle.net/G8Ste/601/

EDIT3：

http://jsfiddle.net/G8Ste/613/

再次更新，以使其更適應。我將代碼轉換爲名爲centeringEffect的插件。 。

用法

$（ 'IMAGES'）centeringEffect（）;

選項

按比例縮小：你想要的百分比將圖像按比例縮小到鼠標按下（默認值：0.6） 比例放大：你想要的百分比的圖像擴展到對mouseUp事件（默認值：。 6）

Answer 2

您正在使用擺動緩動效果。現有的盒子沒有緩解的效果，它具有你想要的行爲。 我看到的唯一方法是你自己編寫緩動效果，這是基於揮杆算法。

Answer 3

你需要動畫左側和頂部的利潤我想......是這樣的：

$('#myimage').mousedown(function() { 
    var img = $(this); 
    img.stop().animate({ 
     width: ['80px', 'swing'], 
     height: ['80px', 'swing'], 
     marginTop: ['20px', 'swing'], 
     marginLeft: ['20px', 'swing'], 
    }, 50, 'swing'); 
    $(document).one("mouseup", function(){ 
     img.stop().animate({ 
      width: ['150px', 'swing'], 
      height: ['150px', 'swing'], 
       marginTop: ['10px', 'swing'], 
       marginLeft: ['10px', 'swing'], 
     }, 150, 'swing', function() { 
      $(this).animate({ 
       width: ['100px', 'swing'], 
       height: ['100px', 'swing'], 
       marginTop: ['15px', 'swing'], 
         marginLeft: ['15px', 'swing'], 
      }, 1000, 'swing'); 
     }); 
    }); 
}); 

注意，我打字幾乎肯定是不正確的值...

Answer 4

看起來你應該使用Scale

Answer 5

$('#myimage').mousedown(function() { 
    var img = $(this); 
    img.stop().animate({ 
     left: ['30px', 'swing'], // left + (width - new width)/2 
     top: ['60px', 'swing'], // top + (height - new height)/2 
     width: ['80px', 'swing'], 
     height: ['80px', 'swing'], 
    }, 50, 'swing'); 
    $(document).one("mouseup", function(){ 
     img.stop().animate({ 
      left: ['-5px', 'swing'], // left - (new width - width)/2 
      top: ['25px', 'swing'], // top - (new height - height)/2 
      width: ['150px', 'swing'], 
      height: ['150px', 'swing'], 
     }, 150, 'swing', function() { 
      $(this).animate({ 
       left: ['20px', 'swing'], 
       top: ['50px', 'swing'], 
       width: ['100px', 'swing'], 
       height: ['100px', 'swing'], 
      }, 1000, 'swing'); 
     }); 
    }); 
}); 

http://jsfiddle.net/diode/G8Ste/598/

編輯：

，使其成爲所有影像與myimage類下面做 給出一開始存儲所有圖像的初始屬性，通過運行這mousedown處理工作，一旦

$(".myimage").each(function(i, img){ 

    $(img).data("width", $(img).width()); 
    $(img).data("height", $(img).height()); 
    $(img).data("left", parseInt($(img).css("left"),10)); 
    $(img).data("top", parseInt($(img).css("top"),10)); 

}); 

然後

var img = $(this); 

var ww = img.data("width"); 
var hh = img.data("height"); 
var left = img.data("left"); 
var top = img.data("top"); 

// then same code as last jsfiddle 

。

Answer 6

http://jsfiddle.net/AJ66C/2/

改變的CSS由左：20像素;左：50px; 計算中心爲寬度/ 2 +頂部或左側（它應該保持相同的所有時間）

$('#myimage').mousedown(function() { 
     var img = $(this); 
     img.stop().animate({ 
      width: ['80px', 'swing'], 
      height: ['80px', 'swing'], 
      top: ['60px', 'swing'], 
      left: ['60px', 'swing'], 
     }, 50, 'swing'); 
     $(document).one("mouseup", function(){ 
      img.stop().animate({ 
       width: ['150px', 'swing'], 
       height: ['150px', 'swing'], 
       top: ['25px', 'swing'], 
       left: ['25px', 'swing'], 
      }, 150, 'swing', function() { 
       $(this).animate({ 
        width: ['50px', 'swing'], 
        height: ['50px', 'swing'], 
       top: ['75px', 'swing'], 
       left: ['75px', 'swing'], 
       }, 1000, 'swing'); 
      }); 
     }); 
    });