变焦功能基本完成

Zoom function almost complete

本文关键字：功能 变焦      更新时间：2023-09-26

我的同事几乎完成了这个缩放功能，但我不知道如何完成它。这是一个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'});
    }
});

$('.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'});
        });
演示

相关文章：