javascript - 在纸上缩放特定元素

Question

如何放大纸上的特定符号。我的意思是，我可以放大整个页面，但现在我想放大特定元素。

在谷歌搜索时，我发现了一个例子。然而，在那些它只是缩放。

你知道我怎样才能放大吗？

Answer 1

jsFiddle Demo

您可以在元素上使用半标准 csszoom和半兼容。-moz-transform: scale(x);如前所述，这只会扩展它。为了对其进行缩放或模拟真实的缩放，您必须将其包裹在相对定位的元素中，并将缩放后的内容放置在绝对定位的元素中。这是一个例子：

html

<div class="holder"><div id="d">No Zoom</div></div>
<div class="holder"><div id="a">Zoom</div></div>

css

#d, #a{
 position:absolute;
 width:100%;
 height:100%;
}

.holder{
 overflow:hidden;
 position:relative;
 width:90px;
 height:90px;
 background-color:blue;
 color:white;
 border: 2px solid black;
 padding:10px;
}

js

var a = document.getElementById("a");
a.onmouseover = function(){
 this.setAttribute("style","zoom: 5;-moz-transform:scale(5);");
};
a.onmouseout = function(){
 this.removeAttribute("style");
};