[英]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;
}
You dont need a lot of javascript here..just some good CSS as shown here: http://jsfiddle.net/95wqh/10/ 你这里不需要很多javascript。只需要一些好的CSS,如下所示: http : //jsfiddle.net/95wqh/10/
JS: JS:
$('.image').on('click', function () {
$(this).toggleClass('zoom');
});
css: CSS:
#Container {
position:relative;
overflow:auto;
}
.zoom{
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
Try and see if the below code helps you. 试试看以下代码是否对您有所帮助。 Demo
演示
EDIT: Just in-case you want to do this on multiple images in same page. 编辑:只是在你想要在同一页面的多个图像上执行此操作。
var zoom = "in";
$('.image').on('click', function () {
this.zoom = (this.zoom == "in") ? "out" : "in";
console.log(this.zoom);
resizeImg(this);
});
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);
if(img.zoom == "in"){
$(img).css({
width: img.width*scale,
height: img.height*scale
});
}
else if (img.zoom == "out"){
$(img).css({
width: img.width/scale,
height: img.height/scale
});
}
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
DEMO Works with multiple images DEMO适用于多个图像
$('img').attr('zoom', 0);
$('.image').on('click', function () {
resizeImg(this);
});
function resizeImg(img) {
var zoom = $(img).attr('zoom');
if (zoom == 0) {
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
}).attr('zoom', 1);
container.scrollLeft = ($(container).width() / -2) + clickX * scale;
container.scrollTop = ($(container).height() / -2) + clickY * scale;
}else{
$(img).attr('zoom',0).attr('style','');
}
}
setting zoom
attribute = 0 for all the images --> $('img').attr('zoom', 0);
为所有图像设置
zoom
属性= 0 - > $('img').attr('zoom', 0);
if zoom
attribute is set to 0
we will make zoom
effect and set attribute zoom=1
如果
zoom
属性设置为0
我们将进行zoom
效果并设置属性zoom=1
else zoom
attribute is set to 1
that is already zoomed we set the attribute zoom=0
and style
attribute is removed to get the image back to normal. 否则
zoom
属性设置为1
已经缩放我们设置属性zoom=0
并删除style
属性以使图像恢复正常。
If you have multiple images this might also help you 如果您有多个图像,这也可能对您有所帮助
JSfiddle: http://jsfiddle.net/95wqh/14/ JSfiddle: http : //jsfiddle.net/95wqh/14/
JS code: 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;
}
if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
this.toggleZoom = !this.toggleZoom;
and 和
var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.