如何做文字放大缩小波浪效果js

JavaScript012

如何做文字放大缩小波浪效果js,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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，不显示。

过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。