在紙上縮放特定符號

Question

如何放大紙張上的特定符號。我的意思是，我可以放大整個頁面，但現在我想放大特定的元素。

雖然使用谷歌搜索，我發現了一個例子。然而，在那些只是縮放。

你知道我怎麼放大？

Answer 1

jsFiddle Demo

可以使用半標準的CSS zoom，半兼容-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"); 
};