缩放和缩放图像

Scale and zoom an image

本文关键字：缩放 图像      更新时间：2023-09-26

我看到了这个问题，发现它很有帮助，但我试着用代码做更多的事情来应用缩放按钮，似乎不能让它正常工作。我是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来演示我的代码

this指的是被点击的元素(实际上，您应该在jQuery中使用$(this))，因为在点击之后调用的函数得到了那个作用域。所以在你的例子中，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'))。后者也有一个单位，所以你必须对它进行解析才能得到数值。

我已经为你的加号按钮修复了它，你可以按照同样的原则为减号按钮。我是这样做的:

    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过渡，使缩放不那么起伏)

相关文章：