Q

如何平移/缩放HTML内容？（即谷歌地图，WordSquared）

2011-03-31 69 views 2 likes

2

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

2011-03-31 User1578

+0

控制+滚轮上会做:) – Dunhamzzz 2011-03-31 14:47:34

+0

噢，这将是有趣，使：@Dunhamzzz他用鼠标指d – mattsven 2011-03-31 14:47:44

+0

，像谷歌地图.. – mattsven 2011-03-31 14:48:14

A

回答

0

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

移动滚动条

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

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

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

2011-03-31 21:24:23 seanmakesgames

1

从技术上讲，这些不是“缩放”。这些页面具有Javascript事件侦听器，用于侦听某些事件，例如鼠标滚轮运动，当它们被触发时，将执行动态更改页面内容属性的函数。例如，Google地图会更改图像的尺寸，然后当“缩放”效果完成时，它会以更高的分辨率替换图像。

2011-03-31 14:49:54 Joshua

4

您可以通过一些事件和一点数学来实现平移效果。

让我们假设您的页面上的内容比窗口更宽，更高。浏览器将显示滚动条，以便用户可以通过移动滚动条来查看所有内容。您可以做的平移效果是隐藏滚动条并附加一些事件，以便当用户拖动文档上的任何位置时，实际上会以编程方式移动滚动条。

这里是一个的jsfiddle例子（显然需要改进）：http://jsfiddle.net/jFQEW/4/

您可以通过将一个overflow: hidden您的内容元素的隐藏滚动条，你可以用.scrollLeft和.scrollTop

2011-03-31 15:49:45 Daniel

+0

优秀！如何关于iFrame内容滚动？我们可以为iframe内容实现相同的平移效果吗？我正在寻找这个问题的解决方案http://stackoverflow.com/questions/8802450/jquery-iframe-content-panning-instead-of-scrolling – MANnDAaR 2012-01-10 12:00:13

9

虽然不像字^ 2，谷歌地图，根据您的要求这个插件刚刚发布了jQuery的可能是你寻找什么：

2011-03-31 21:52:42 mVChr

+0

伟大的插件...谢谢... :) – 2012-08-24 06:38:12

-1

进行变焦，您可以使用：

$("#drawing").css("-webkit-transform","scale(0.75)"); // chrome

或

$("#drawing").css("zoom",75%); // CSS3

2013-08-29 16:34:34 Wojciech

+0

编辑：道歉，我错了，至少在现代的Webkit浏览器中支持缩放。原始文本：缩放只是IE7及以下版本的有效属性。当然不是CSS3。 – 2013-10-01 21:30:21

0

如果您可以在ems中设置宽度，高度，填充和边距，然后您可以通过使用+/- 按钮和一些简单的JavaScript功能更改父容器字体大小来缩小和放大元素。

2014-07-02 16:54:23 martinedwards

相关问题