<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
#numbox,#aimbox{ display:block; width:100px; height:100px; font:20px/100px arial; text-align:center; opacity:1;}
</style>
<div style="position:relative;">
<div id="numbox" style="position:relative;">143</div>
<div id="aimbox" style="position:absolute; top:0; left:0;"></div>
</div>
<a id="clickMe" href="#">点我一下</a>
<script>
// minFont最小字体 maxFont最大字体 addNum递增数值
var zoomIn = function (numObj, aimObj, minFont, maxFont, addNum) {
var num = parseInt(numObj.innerHTML, 10);
aimObj.style.display = "block";
aimObj.innerHTML = num;
var fontSize = minFont, opacity = 1;
var setp = setInterval(function () {
fontSize += 2;
opacity -= 0.09;
aimObj.style.fontSize = fontSize + "px";
aimObj.style.opacity = opacity;
numObj.style.opacity = opacity;
aimObj.style.filter = "Alpha(opacity=" + opacity * 100 + ")";
numObj.style.filter = "Alpha(opacity=" + opacity * 100 + ")";
if (fontSize > maxFont) {
num += addNum;
aimObj.innerHTML = num;
numObj.innerHTML = num;
clearInterval(setp);
var setp2 = setInterval(function () {
fontSize -= 2;
opacity += 0.09;
aimObj.style.fontSize = fontSize + "px";
aimObj.style.opacity = opacity;
numObj.style.opacity = opacity;
aimObj.style.filter = "Alpha(opacity=" + opacity * 100 + ")";
numObj.style.filter = "Alpha(opacity=" + opacity * 100 + ")";
if (fontSize <= minFont) {
clearInterval(setp2);
}
}, 20);
}
}, 20);
};
document.getElementById("clickMe").onclick = function () {
zoomIn(document.getElementById("numbox"), document.getElementById("aimbox"), 20, 30, 1);
return false;
};
</script>
</body>
</html>