缩放功能差不多完成

我的同事几乎完成了这个缩放功能，但我无法弄清楚如何完成它。 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

缩放功能差不多完成

回答

相关问题