如何平移/缩放HTML内容？ （即谷歌地图，WordSquared） [英] How can I pan/zoom HTML content? (ie. Google Maps, WordSquared)

问题描述

我正在寻找平移/放大页面上的HTML内容，就像Word ^ 2（wordsquared.com），但我找不到一个jQuery插件或其他任何帮助。我可以忽略简单的事情吗？我真的不知道从哪里开始。

I'm looking to pan/zoom HTML content on a page, much like Word^2 (wordsquared.com) but I can't find a jQuery plugin or anything else to help. Am I overlooking something simple? I'm really not sure where to start.

推荐答案

http://jqueryui.com/demos/draggable/

WordSquared.com使用jQuery UI和流如果视图需要刷新，则拖动结束时的内容。

WordSquared.com uses jQuery UI and streams in our content when the drag ends if the view needs to be refreshed.

我们使用'draggable'中的拖动和停止事件来执行这些检查并更新内容。

We use the drag and stop events in 'draggable' to perform these checks and update the content.

缩放实际上是由浏览器实现（或不是），并且只是起作用。
要获得Google Maps-ish实现，您需要具有图像细节级别并在它们之间混合。您无法捕获浏览器的缩放事件，但您可以获取触发浏览器缩放的事件（鼠标滚轮，多点触控 - 搜索额外的jquery插件），并自己执行自定义缩放工作。

Zooming is actually implemented (or not) by the browsers and kinda just works. To get google maps-ish implementation you would need to have image detail levels and blend between them. You can't catch the browser's 'zoom' event but you can get the events that are triggering the browser's zoom (mousewheel, multitouch-- search for additional jquery plugins) and do the custom zooming work yourself.

这篇关于如何平移/缩放HTML内容？ （即谷歌地图，WordSquared）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！