縮放功能差不多完成

我的同事幾乎完成了這個縮放功能，但我無法弄清楚如何完成它。 Here is a jsFiddle.當您移動右側的滑塊時，紅色圓點應該保留在與圖像相同的位置。除了$（'。marker'）中的代碼之外，一切都很好。each（function（）{...}）;我嘗試了很多組合，但似乎無法獲得變焦的正確邏輯。謝謝！縮放功能差不多完成

這裏是JS：

$("#sliderVertical").slider({ 
    orientation: "vertical", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 50, 
    slide: function(event, ui) { 
     $("#sliderValue").text(ui.value); 
     var backImg = $('img'); 
     if (ui.value == 0) { 
      ui.value = 0.1; 
     }   
     var width = ui.value * 12; 
     var height = width * .75; 

     $('.marker').each(function(){ 
      var marginLeft = parseFloat($(this).css('margin-left')), 
      totalWidth = parseFloat(backImg.css('width')); 
      var newMarginLeft = null; 

      var marginTop = parseFloat($(this).css('margin-top')), 
      totalHeight = parseFloat(backImg.css('height')); 
      var newMrginTop = null; 

      console.log(totalHeight); 

      //$(this).css({'margin-left': newMarginLeft + 'px', 'margin-top': newMrginTop + 'px'}); 
     }); 

     var marLeft = 0 - (width/2); 
     var marTop = 0 - (height/2); 

     backImg.css({'width': width + 'px', 'height': height + 'px', 'margin-left': marLeft + 'px', 'margin-top': marTop + 'px'}); 

    } 
});

來源

2013-06-05 dezman

這是一個難以解開的謎題確實如此。我可以建議增加紅點作爲更大圖片的子元素，並使用'位置：相對' –

@itcouldevenbeaboat我真的不明白這是如何使它更容易，但我想它可以幫助。我覺得這個邏輯會保持大致相同。 – dezman

@watson如果您將當前'img'設置爲'div'的背景，並將標記放在那裏，一旦將它們放置好了，如果您使用滑塊調整'div'的大小，則標記應該移動到它們本身而不需要JS的幫助。 –

$('.marker').each(function(){ 
      var marginLeft = parseFloat($(this).css('margin-left')), 
      totalWidth = parseFloat(backImg.css('width')); 
      var newMarginLeft = marginLeft*width/totalWidth; 

      var marginTop = parseFloat($(this).css('margin-top')), 
      totalHeight = parseFloat(backImg.css('height')); 
      var newMrginTop = marginTop*height/totalHeight; 

      console.log(totalHeight); 

      $(this).css({'margin-left': newMarginLeft + 'px', 'margin-top': newMrginTop + 'px'}); 
     });

DEMO

來源

2013-06-05 15:09:15 kei

我應該注意到，如果你一路走下去放大0，那麼這會以某種方式破壞。你可以通過只下降到1來解決這個問題。 – kei

真棒，謝謝！出於好奇，你需要多長時間才能得到它？ – dezman

不長。你基本上已經想通了。我看到註釋掉的代碼在標記上應用了邊距，並且看到'newMarginLeft'和'newMrginTop'沒有被設置爲任何東西。這是一個縮放問題。您知道圖像的寬度及其新寬度，因此它只是按相同的因子縮放邊距。 – kei

縮放功能差不多完成

回答

相關問題