<!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>