3

ユーザーが画像をクリックすると画像がズームインし、もう一度クリックすると画像がズームアウトするプロジェクトに取り組んでいます。ここのコードでズームアウト機能を作成するにはどうすればよいですか

function resizeImg (img) {
    var scale = 150/100;
    var pos = $(img).offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $(img).parent().get(0);

    $(img).css({
        width: img.width*scale, 
        height: img.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
4

4 に答える 4

2

ここにたくさんの JavaScript は必要ありません。

JS:

$('.image').on('click', function () {
    $(this).toggleClass('zoom');
});

CSS:

#Container {
    position:relative;
    overflow:auto;
}

.zoom{
    -webkit-transform : scale(1.5);
    transform: scale(1.5);
}
于 2013-08-17T06:51:23.843 に答える
1

デモ

デモ 複数の画像で動作

$('img').attr('zoom', 0);
$('.image').on('click', function () {
    resizeImg(this);
});

function resizeImg(img) {
    var zoom = $(img).attr('zoom');
    if (zoom == 0) {
        var scale = 150 / 100;
        var pos = $(img).offset();
        var clickX = event.pageX - pos.left;
        var clickY = event.pageY - pos.top;
        var container = $(img).parent().get(0);
        $(img).css({
            width: img.width * scale,
            height: img.height * scale
        }).attr('zoom', 1);
        container.scrollLeft = ($(container).width() / -2) + clickX * scale;
        container.scrollTop = ($(container).height() / -2) + clickY * scale;
    }else{
        $(img).attr('zoom',0).attr('style','');
    }
}

zoomすべての画像に対して属性 = 0 を設定-->$('img').attr('zoom', 0);

zoom属性がに設定されている場合0、zoom有効にして属性を設定しますzoom=1

elsezoom属性を設定する1と、既にズームされているため、属性を設定し、属性zoom=0をstyle削除して画像を通常の状態に戻します。

于 2013-08-17T06:58:32.313 に答える