Question

我的同事几乎完成了这个缩放功能，但我无法弄清楚如何完成它。 Here is a jsFiddle.当你移动右边的滑块时，红点应该保持在相对于图像的相同位置。除了$（'。marker'）中的代码之外，一切都很好。每个（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'});

    }
});

Answer 1

$('.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

变焦功能几乎完成

1 个答案: