我正在处理一个项目,其中有一个图像,当用户点击图像时图像放大,再次点击图像缩小。如何在我的代码中实现缩小功能 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;
}
最佳答案
这里不需要很多 javascript.. 只需一些好的 CSS,如下所示:http://jsfiddle.net/95wqh/10/
JS:
$('.image').on('click', function () {
$(this).toggleClass('zoom');
});
CSS:
#Container {
position:relative;
overflow:auto;
}
.zoom{
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
关于javascript - 使用javascript的图像缩小功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18285974/