[英]Scale and zoom an image
I saw this question and found it helpful, but I tried doing more with the code to apply zoom buttons and can't seem to get it to work properly. 我看到了这个问题,并发现它很有用,但是我尝试使用代码执行更多操作以应用缩放按钮,但似乎无法使其正常工作。 I'm new to javascript and jquery and I'm having trouble understanding how the "this" keyword is applied.
我是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;
}
);
this
refers to the clicked element (actually, you should probably be using $(this)
in jQuery), because the function that's called after the click gets that scope. this
是指clicked元素(实际上,您可能应该在jQuery中使用$(this)
),因为单击后调用的函数将获得该作用域。 So in your example, this
refers to either the plus or the minus button, therefore you're techically scaling their width/height and applying the resulting width/height to the image. 因此,在您的示例中,
this
是指加号或减号按钮,因此,您需要从技术上缩放其宽度/高度,并将结果的宽度/高度应用于图像。
A common thing to avoid having to debug what this
represent is to assign it to a variable at the very top of the function, for example: 常见的事,以避免调试的
this
代表的是它在函数的最顶端分配给一个变量,例如:
var self = this;
or 要么
var $myClickedButton = this;
Also, pay attention to styling: 另外,请注意样式:
element.width
refers to an element's width attribute (like <img width="300" />
, similar to jQuery's $(element).attr('width')
), but element.width
引用元素的width属性(例如<img width="300" />
,类似于jQuery的$(element).attr('width')
),但是 element.style.width
refers to its CSS width (like <img style="width: 300px;" />
, or <img class="myClassWithDenotedWidth" />
, similar to jQuery's $(element).css('width')
). element.style.width
是指其CSS宽度(例如<img style="width: 300px;" />
或<img class="myClassWithDenotedWidth" />
,类似于jQuery的$(element).css('width')
)。 The latter also has a unit, so you have to parseInt it to get just the numeric value. I've fixed it for your plus button, you can follow the same principle for the minus. 我已经将其固定为您的加号按钮,您可以遵循与减号相同的原理。 Here's what I did:
这是我所做的:
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)
});
See it here: http://jsfiddle.net/shomz/4A9Gt/4/ (also added a CSS transition to make zooms less choppy) 在此处查看: http : //jsfiddle.net/shomz/4A9Gt/4/ (还添加了CSS过渡效果,以使缩放幅度不那么波动)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.