我的目标是创建一个插件,可以在页面区域上进行缩放和平移操作,就像Google Maps当前的工作方式一样(意思是:滚动鼠标=放大/缩小区域,点击并按住&移动和释放=平移).
滚动时,我希望以鼠标光标为中心进行缩放操作.
为此,我使用即时CSS3矩阵转换.唯一但强制性的约束是我不能使用除CSS3平移和缩放变换以外的任何东西,变换原点为0px 0px.
平移不在我的问题范围内,因为我已经开始工作了.当谈到缩放时,我正在努力弄清楚我的javascript代码中的毛刺在哪里.
问题必须在MouseZoom.prototype.zoom函数中的某处,在x轴和y轴上的平移计算中.
首先,这是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="StackOverflow.js"></script>
<style type="text/css" media="all">
#drawing {
position: absolute;
top: 0px;
left: 0px;
right:0;
bottom:0;
z-index: 0;
background: url(http://catmacros.files.wordpress.com/2009/09/cats_banzai.jpg) no-repeat;
background-position: 50% 50%;
}
</style>
<title>Test</title>
</head>
<body>
<div id="drawing"></div>
<script>
var renderer = new ZoomPanRenderer("drawing");
</script>
</body>
</html>
正如你所看到的,我正在使用Jquery和Brandon Aaron的jquery鼠标滚轮插件,可以在这里找到:https: //github.com/brandonaaron/jquery-mousewheel/
这是StackOverflow.js文件的内容: …