缩放 css/javascript答案

【问题标题】：zoom css/javascript缩放 css/javascript
【发布时间】：2011-01-02 20:01:47
【问题描述】：

我想知道如何通过javascript控制缩放属性，像 div.style.top ，如何指定缩放？

【问题讨论】：

【解决方案1】：

IE 特定的zoom 属性的 Firefox 和 Chrome (Webkit) 等效项分别为 -moz-transform 和 -webkit-transform。

示例代码如下：

.zoomed-element {
    zoom: 1.5;
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

您必须对 Javascript 更加小心（首先测试是否存在），但以下是您操作它们的方式：

el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';

【讨论】：

el.style.zoom = 1.5;工作很酷，我以错误的方式赋予价值！，缩放的可接受数字是多少？是在 1 到 2 之间，如果我提到 1.5 是 150 % 吗？
我不确定缩放级别是否受到限制。是的，1.5 => 150%
1 == 100%，你可以超过 2。
更新：zoom 也是一个有效的 Chrome CSS 属性。
IE9 supports transforms: -ms-transform: scale(1.5);。它比zoom 更好用；在比较 IE9 和 Chrome 之间的结果时 - 它不一样。（IE和Chrome处理<body>的边距与zoom不同，所以用-*-transform。9之前的IE版本带来其他问题，不得不禁用缩放功能。There are workarounds.）

【解决方案2】：

它是style 的属性，但并非所有浏览器都支持。这是 Internet Explorer 实现的non-standard Microsoft extension of CSS。访问方式如下：

div.style.zoom

【讨论】：

我主要在 Safari 中进行测试，在 Safari 中，如果我以 css 样式给出缩放值，它可以工作，但不能 div.style.zoom=200% 或 200+"%" 或 200 或 "200%" .
zoom 是一个非标准属性，所以 webkit 引擎无法识别它。

【解决方案3】：

您可能想尝试一个名为Zoomoz 的轻量级jQuery 插件。它使用 CSS3 变换属性（平移、旋转、缩放）。查看“缩放 jQuery 方式”部分。希望对您有所帮助。

$(document).ready(function() {
    $("#element").zoomTarget();
});

【讨论】：