我正在寻找平移/缩放页面上的 HTML 内容，很像 Word^2 (wordsquared.com)，但我找不到 jQuery 插件或其他任何帮助。我忽略了一些简单的事情吗？我真的不知道从哪里开始。
【问题讨论】：
标签： jquery html google-maps
虽然与 Word^2 和 Google 地图不同，但根据您的要求，刚刚为 jQuery 发布的这个插件可能正是您正在寻找的：
【讨论】：
您可以通过一些事件和一些数学运算来实现平移效果。
假设页面上的内容比窗口更宽更高。浏览器将显示滚动条，因此用户可以通过移动滚动条来查看所有内容。要制作平移效果，您可以做的是隐藏滚动条并附加一些事件，这样当用户在文档上的任意位置拖动时，您实际上会以编程方式移动滚动条。
这是一个 jsfiddle 示例（显然需要改进）：http://jsfiddle.net/jFQEW/4/
您可以通过在内容元素上放置overflow: hidden 来隐藏滚动条，并且您可以使用.scrollLeft 和.scrollTop 移动滚动条
【讨论】：
从技术上讲，这些并没有被“放大”。这些页面具有 Javascript 事件侦听器，可以“侦听”某些事件，例如鼠标滚轮运动，当触发这些事件时，将执行动态更改页面内容属性的函数。例如，谷歌地图会改变图像的尺寸，然后当“缩放”效果完成时，它会用更高分辨率替换图像。
【讨论】：
http://jqueryui.com/demos/draggable/
WordSquared.com 使用 jQuery UI 并在需要刷新视图时在拖动结束时在我们的内容中流式传输。
我们使用 'draggable' 中的拖动和停止事件来执行这些检查并更新内容。
缩放实际上是由浏览器实现（或不实现），并且有点工作。 要获得类似于谷歌地图的实现，您需要拥有图像细节级别并在它们之间进行混合。您无法捕捉浏览器的“缩放”事件，但您可以获取触发浏览器缩放的事件（鼠标滚轮、多点触控——搜索其他 jquery 插件）并自己进行自定义缩放工作。
【讨论】：
如果您在 em 中设置宽度、高度、内边距和边距，那么您可以通过使用 + / - 按钮和一些简单的 JavaScript 功能更改父容器的字体大小来缩小和放大元素。
【讨论】：
对于缩放，您可以使用：
$("#drawing").css("-webkit-transform","scale(0.75)"); // chrome
或
$("#drawing").css("zoom",75%); // CSS3
【讨论】：