0

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

    }
});
4

1 回答 1

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

演示

于 2013-06-05T15:09:15.200 回答