的一個因素減少元件尺寸然後用相同的因素增加至原來的大小

Question

首先，我知道我的問題在這裏是在Javascript中四捨五入的根，我只是不知道如何在這種特定情況下降低它。

我有一個元素，我想通過點擊'縮小'按鈕讓用戶降低高度。高度的降低將作爲元素當前高度的比例 - 例如，如果元素高度爲100像素，則將縮放係數設置爲0.3時縮小一次會將其高度降低至70像素。再次縮小會將其高度降低到49px，依此類推。

頁面上還有一個「放大」按鈕。縮小後，用戶應該能夠使用「放大」按鈕再次增加元素的高度。重要的是，放大時元素高度的每個增量應該與縮小時看到的增量相匹配。例如，如果元素在縮小時的高度爲：100,70,49,34.3,24.01，則當再次縮回時，元素的高度將是24.01,34.3,49,70,100。

我已創建演示此功能的小提琴here。您會注意到，如果您運行它並最初單擊連續七次的「縮小」按鈕（標記爲「 - 」），則連續七次單擊「放大」按鈕，而不是返回元素的高度到100px，它結束爲95.7142 ... px，並且放大時的其他高度與放大時的高度也不匹配。

$(function() { 
    var zoomAmount = 0.3; 
    var $el = $("#testDiv"); 

    $("#zoomIn").click(function() { 
    var currentHeight = $el.height(); 
    var newHeight = currentHeight * (1/(1 - zoomAmount)); 
    //newHeight = Math.round(newHeight * 10000/10000); 
    $el.height(newHeight); 
    $el.html(newHeight); 
    if (newHeight >= 100) { 
     $("#zoomIn").prop("disabled", true); 
    } 
    }); 

    $("#zoomOut").click(function() { 
    $("#zoomIn").prop("disabled", false); 
    var currentHeight = $el.height(); 
    var newHeight = currentHeight * (1 - zoomAmount); 
    //newHeight = Math.round(newHeight * 10000/10000); 
    $el.height(newHeight); 
    $el.html(newHeight); 
    }); 
}); 

我明白，這是通過使用縮小的計算四捨五入的積累所致，然後回來，但我不知道如何避免它。你可以看到我已經註釋了一些試圖將元素的高度四捨五入到小數點後兩位的行，但它們並沒有幫助。沒有註釋的元素，元素的高度最終爲96px，這意味着即使在將值設置爲元素的高度之前將其舍入爲2dp，它仍然會以某種方式知道完整的未知數，並且在計算時使用它下一個新的高度。

我能想到的唯一解決方案是在放大和縮小時將元素的高度值存儲在數組中，這樣當我放大相反方向時，將從數組中查找新高度，而不是重新計算，但不覺得很優雅。另外，在我的實際應用程序中，每次頁面上有幾十個元素，每個元素的高度都不相同，因此我必須跟蹤它自己的數組中每個元素的高度，這看起來更不優雅。

有沒有一種方法可以在我縮小和放大時計算元素的高度（實際上，您可以放大然後放大，但這需要更多的代碼，所以我簡化了它），這將確保在每個「縮放增量「元素的高度總是相同的？

Answer 1

使用的指數函數，並保持你的zoomAmount作爲一個整數（一個更好的名字則是類似zoomLevel）。因此，您可以簡單地執行zoomAmount++或zoomAmount--，而不是修改一個會累積舍入誤差的浮點數，然後通過將浮點數提升到zoomAmount（通常數字，然後可以調整圖形）來獲得元素的真實比例有一些常數，你認爲合適）。 例如：

$el.height = base_height * pow(2.7182, zoomAmount) 

確保你開始zoomAmount = 0，因爲E 1 0 = 1。 由於整數不存在舍入誤差，因此可保證具有一致的縮放級別。此解決方案的另一個優點是它具有較低的內存佔用量，因爲您只需爲文檔的每個元素保存一個基本高度。

Answer 2

您可以存儲以前的值，並彈回的變焦（fiddle）。

$(function() { 
    var values = []; 

    $("#zoomIn").click(function() { 
     var newHeight = values.pop(); 
     // ... 
    }); 

    $("#zoomOut").click(function() { 
     var currentHeight = $el.height(); // this value gets stored 
     values.push(currentHeight); 
     // ... 
    }); 
});