【模块】加分效果

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

相关阅读:
Windows 服务程序(一)
API---注册表编程
API---文件操作
main(argc, char *argv[])
C 自删除技术---批处理方式
分治法排序
TDD尝试：nodejs单元测试
尝试create tech team
Yum重装走过的坑
求生欲很强的数据库

原文地址：https://www.cnblogs.com/jzm17173/p/2563878.html