Question

我看到this 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指的是被点击的元素（实际上，您应该在jQuery中使用$(this)），因为点击后调用的函数会获得该范围。因此，在您的示例中，this指的是加号或减号按钮，因此您可以通过技术方式缩放其宽度/高度，并将生成的宽度/高度应用于图像。

避免必须调试this表示的内容的常见事情是将其分配给函数最顶部的变量，例如：

var self = this;

或

var $myClickedButton = this;

另外，要注意造型：

element.width指的是元素的宽度属性（如<img width="300" />，类似于jQuery＆＃39; s $(element).attr('width')），但
element.style.width指的是CSS宽度（例如<img style="width: 300px;" />或<img class="myClassWithDenotedWidth" />，类似于jQuery＆＃39; s $(element).css('width')）。后者也有一个单位，所以你必须解析它才能得到数值。

我已将其固定为加号按钮，您可以按照相同的原则进行减号操作。这就是我的所作所为：

    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过渡，以使变焦更不稳定）

缩放和缩放图像

1 个答案: