我正在尝试编写一个非常简单的缩放插件,它应该只有一个按钮来放大,缩小和平移功能来移动图像。
现在我写了一部分来放大和缩小。
我的问题是我无法找到将图像置于“缩放框”中心的方法。
到目前为止,这是我的代码:
$.fn.zoom = function() {
var img = this;
img.attr("style", "-ms-transform: scale(1); -ms-transform-origin: 0% 0%; -webkit-transform: scale(1); -webkit-transform-origin: 0% 0%").wrap('<div style="width: 400px; height: 400px; overflow: hidden;" class="zoombox" data-scale="1"></div>');
$("body").on("click.zoom", ".zoomin, .zoomout", function() {
if( $(this).hasClass("zoomin") ) {
var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
} else {
var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
}
img.parent().attr("data-scale", zoomFactor);
console.log(zoomFactor);
img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")"});
});
};
小提琴:
http://jsfiddle.net/xM7r4/1/
我知道风格并不是最好的,但我只是想让它工作而不考虑代码的风格。
如何将图像置于框内,以为我以后必须应用平移效果才能更改transform-origin
值?
PS:我现在只关心Chrome和IE9的兼容性。
答案 0 :(得分:0)
编辑评论
你是对的。在这里,我已更新为使用transform-origin
。它采用包含div的维度并除以2(得到包含div的中心点)并将它们传递到图像的css transform-origin
属性中:
我已经使用不同尺寸的图像进行了测试,但它确实有效。
的原始强> 的
您需要使用margin-left
和margin-top
移动图片,具体取决于您是否放大或缩小。
由于您以1%的比例增加图像,因此需要相应地移动边距,放大时为负,缩小位置。
$("body").on("click.zoom", ".zoomin, .zoomout", function() {
var imgWidth = $(img).width();
var imgHeight = $(img).height();
var scaleWidth = Math.floor(imgWidth * 0.01);
var scaleHeight = Math.floor(imgHeight * 0.01);
if( $(this).hasClass("zoomin") ) {
var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
moveLeft -= scaleWidth;
moveTop -= scaleHeight;
} else {
var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
moveLeft += scaleWidth;
moveTop += scaleHeight;
}
console.log(moveTop);
console.log(moveLeft);
img.parent().attr("data-scale", zoomFactor);
console.log(zoomFactor);
img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")", "marginLeft": moveLeft, "marginTop": moveTop});
});