<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现文字放大效果</title>
<script type="text/javascript">
var n = 12
function chanTxt()
{
var obj = document.getElementById("test")
if(n <= 42)
{
obj.style.fontSize = n+"px"
}
n++
}
</script>
</head>
<body>鼠标经过橙色部分
<div id="test" onmouseover="setInterval('chanTxt()',100)" style="width:300pxheight:50pxfont-size:12pxline-height:50pxbackground:#f90">代码家园</div>
</body>
</html>
<br>鼠标滑过橙色部分，文字逐渐放大。 重新预览效果请刷新本页面~<br><hr>收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<style>#ul1{ margin:0px 0pxlist-style:none}
.ul2{ margin:0px 0pxlist-style:nonebackground-color:#00FFCC}
a{ cursor:pointer}
.axy{ display:none}
</style>
<script>
function x(y)
{
var uy="u"+y
var zky="zk"+y
var sjy="sj"+y
var desd=document.getElementById(uy).style.display
//alert(desd)
if((desd=='')||(desd=='block')){
document.getElementById(uy).style.display='none'
document.getElementById(zky).style.display='block'
document.getElementById(sjy).style.display='none'}
else if(desd=='none'){
document.getElementById(uy).style.display='block'
document.getElementById(zky).style.display='none'
document.getElementById(sjy).style.display='block'
}
}
</script>
<ul id="ul1">
<li><a id="zk1" onclick="x(1)" class="axy">1展开</a><a id="sj1" onclick="x(1)">1缩进</a><ul id="u1"class="ul2"><li>11</li><li>12</li></ul></li>
<li><a id="zk2" onclick="x(2)" class="axy">2展开</a><a id="sj2" onclick="x(2)">2缩进</a><ul id="u2"class="ul2"><li>21</li><li>22</li></ul></li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a id="zk6" onclick="x(6)" class="axy">6展开</a><a id="sj6" onclick="x(6)">6缩进</a><ul id="u6"class="ul2"><li>61</li><li>62</li></ul></li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
网页元素一个一个删除，然后一个一个载入新网页的元素,这样子网页在过度过程中会出现变形和抖动。比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。
过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。
