缩放 css/javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2026294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 22:27:37  来源:igfitidea点击:

zoom css/javascript

javascriptzoom

提问by sat

I would like to know how zoom property can be controlled through javascript, like div.style.top , how to specify for zoom ?

我想知道如何通过javascript控制缩放属性,比如 div.style.top ,如何指定缩放?

回答by K Prime

The Firefox & Chrome (Webkit) equivalents to the IE-specific zoomproperty are, respectively, -moz-transformand -webkit-transform.

与特定于 IE 的zoom属性等效的 Firefox 和 Chrome (Webkit)分别是-moz-transform-webkit-transform

A sample code would be:

示例代码是:

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

You'd have to be a bit more careful with Javascript (test for existence first), but here's how you'd manipulate them:

您必须对 Javascript 更加小心(首先测试是否存在),但您可以通过以下方式操作它们:

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

回答by zombat

It is a property of style, but it's not supported by all browsers. It's a non-standard Microsoft extension of CSSthat Internet Explorer implements. It is accessed like this:

它是 的一个属性style,但并非所有浏览器都支持它。它是 Internet Explorer 实现的非标准的 Microsoft CSS 扩展。它是这样访问的:

div.style.zoom

回答by juanpaulo

You might want to try a lightweight jQuery plugin called Zoomoz. It uses CSS3 transform properties (translate, rotate, scale). Check out the "Zooming the jQuery way section. Hope it helps.

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

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