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 に答える