缩放图像

Question

我看见 这个问题 并发现它很有帮助，但我尝试使用代码执行更多操作来应用缩放按钮，但似乎无法使其正常工作。我是 javascript 和 jquery 的新手，我无法理解如何应用“this”关键字。

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

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

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

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

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

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

我制造了一个 jsfiddle 演示我的代码。

Answer 1

this 指的是单击的元素（实际上，您可能应该使用 $(this) 在 jQuery 中），因为单击后调用的函数会获取该范围。所以在你的例子中， this 指的是加号或减号按钮，因此您在技术上进行了缩放 他们的 宽度/高度并将生成的宽度/高度应用到图像。

避免调试的常见问题 this 表示就是将其赋值给函数最顶部的变量，例如：

var self = this;

或者

var $myClickedButton = this;

另外，还要注意造型：

• element.width 指的是元素的宽度属性（例如 <img width="300" />, ，类似于 jQuery 的 $(element).attr('width')）， 但
• element.style.width 指的是它的 CSS 宽度（例如 <img style="width: 300px;" />, ， 或者 <img class="myClassWithDenotedWidth" />, ，类似于 jQuery 的 $(element).css('width')）。后者也有单位，因此您必须对其进行 parseInt 才能获取数值。

我已经为你的加号按钮修复了它，你可以对减号遵循相同的原则。这就是我所做的：

    var $image = $('#Container img');
    var container = $image.parent().get(0);

    $('#Container img').css({
        width: Math.round(parseInt($image.css('width'), 10) * scale), 
        height: Math.round(parseInt($image.css('height'), 10) * scale)
    });

在这里查看： http://jsfiddle.net/shomz/4A9Gt/4/ （还添加了 CSS 过渡以使缩放不那么不稳定）