图像缩小功能使用JavaScript [英] image zoom out feature using javascript

问题描述

我正在开发一个项目，当用户点击图像时图像会放大图像，再次点击图像会缩小图像。如何在代码中创建缩小功能此处

I am working on a project in which there is an image when user clicks on image the image zoom in and when click again the image zoom out. How can I make a zoom out feature in my code here

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;
}

推荐答案

如果您有多个图片，也许可以帮到你

If you have multiple images this might also help you

JSfiddle： http：// jsfiddle .net / 95wqh / 14 /

JSfiddle: http://jsfiddle.net/95wqh/14/

JS代码：

$('.image').on('click', function () {
    if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
    this.toggleZoom = !this.toggleZoom;
    resizeImg(this);
});

function resizeImg(img) {
    var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
    console.log(scale);
    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;
}

我添加了什么

What I added

    if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
    this.toggleZoom = !this.toggleZoom;

和

    var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;

这篇关于图像缩小功能使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！