简体繁体 English

JavaScript 缩放整个分区

[英]JavaScript Zoom whole Div

原文 2011-08-15 12:00:26 1 2 javascript/ jquery/ html/ zoom

I'm searching for a JQuery script that can zoom in a whole div.我正在寻找可以放大整个 div 的 JQuery 脚本。 I found the following plugins:我找到了以下插件：

http://test.dpetroff.ru/jquery.iviewer/test/# and http://www.albanx.com/?pid=1&subid=13 http://test.dpetroff.ru/jquery.iviewer/test/#和http://www.albanx.com/?pid=1&subid=13

The plugins have exactly the things I need (just zoom in and out with your scrollwheel).这些插件正是我需要的东西（只需使用滚轮放大和缩小）。 But I have a problem, I need to have a script that zoom in a complete Div.但我有一个问题，我需要一个放大完整 Div 的脚本。 Can someone help me please?有人能帮助我吗？

2 个解决方案

what about using the CSS3 transform 'scale' operation -- https://developer.mozilla.org/en-US/docs/CSS/transform ?使用 CSS3 变换“缩放”操作怎么样 - https://developer.mozilla.org/en-US/docs/CSS/transform ？ you'll have to write up the javascript for dealing with the mousewheel, but this will work (I've done this before).您必须编写 javascript 来处理鼠标滚轮，但这会起作用（我以前做过）。

Seems like there's decent support, too: http://caniuse.com/transforms2d (note from caniuse: The scale transform can be emulated in IE < 9 using Microsoft's "zoom" extension, others are (not easily) possible using the MS Matrix filter)似乎也有不错的支持： http://caniuse.com/transforms2d （来自 caniuse 的注释：可以使用 Microsoft 的“缩放”扩展在 IE < 9 中模拟比例变换，其他（不容易）使用 MS Matrix筛选）

A code example (jsfiddle or something) would probably be pretty helpful to get a better idea of what you want to achieve.一个代码示例（jsfiddle 或其他东西）可能会非常有助于更好地了解您想要实现的目标。 Generally I reckon the CSS property "zoom" animated with jQuery might help here ( jsfiddle ), but this only works in chrome/safari atm.一般来说，我认为 CSS 属性“缩放”用 jQuery 进行动画处理可能会有所帮助（ jsfiddle ），但这仅适用于 chrome/safari atm。