【问题标题】:How can I pan/zoom HTML content? (ie. Google Maps, WordSquared)如何平移/缩放 HTML 内容? (即谷歌地图,WordSquared)
【发布时间】:2014-07-03 00:54:23
【问题描述】:

我正在寻找平移/缩放页面上的 HTML 内容,很像 Word^2 (wordsquared.com),但我找不到 jQuery 插件或其他任何帮助。我忽略了一些简单的事情吗?我真的不知道从哪里开始。

【问题讨论】:

  • Control + Mousewheel up 就可以了 :)
  • 哦,这会很有趣:D
  • @Dunhamzzz 他的意思是用鼠标,就像在谷歌地图中一样..
  • 天哪,这可能是个坏主意。

标签: jquery html google-maps


【解决方案1】:

虽然与 Word^2 和 Google 地图不同,但根据您的要求,刚刚为 jQuery 发布的这个插件可能正是您正在寻找的:

Zoomooz.js

【讨论】:

    【解决方案2】:

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

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

    这是一个 jsfiddle 示例(显然需要改进):http://jsfiddle.net/jFQEW/4/

    您可以通过在内容元素上放置overflow: hidden 来隐藏滚动条,并且您可以使用.scrollLeft.scrollTop 移动滚动条

    【讨论】:

    【解决方案3】:

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

    【讨论】:

      【解决方案4】:

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

      WordSquared.com 使用 jQuery UI 并在需要刷新视图时在拖动结束时在我们的内容中流式传输。

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

      缩放实际上是由浏览器实现(或不实现),并且有点工作。 要获得类似于谷歌地图的实现,您需要拥有图像细节级别并在它们之间进行混合。您无法捕捉浏览器的“缩放”事件,但您可以获取触发浏览器缩放的事件(鼠标滚轮、多点触控——搜索其他 jquery 插件)并自己进行自定义缩放工作。

      【讨论】:

        【解决方案5】:

        如果您在 em 中设置宽度、高度、内边距和边距,那么您可以通过使用 + / - 按钮和一些简单的 JavaScript 功能更改父容器的字体大小来缩小和放大元素。

        【讨论】:

          【解决方案6】:

          对于缩放,您可以使用:

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

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

          【讨论】:

          • 编辑:抱歉,我错了,至少现代 Webkit 浏览器支持缩放。原文:Zoom 仅在 IE7 及以下版本中有效。当然不是 CSS3。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-04-10
          相关资源
          最近更新 更多