javascript博客鼠標點擊愛心特效的代碼與代碼解析

這個鼠標點擊出現愛心的特效經常在別的博客里見到，於是我查了度娘后拿來直接用上了。

雖然不知道原作者是誰，但肯定是個大神，只有通過觀摩他/她的代碼膜拜一下啦。

直接上代碼（解析在代碼注釋里）：

// 自執行匿名函數
(function(window, document, undefined) { // 傳入window，document對象
    var hearts = []; // 定義全局變量hearts，值為空數組

    // 定義不同瀏覽器下的requestAnimationFrame函數實現，如果都沒有，則用setTimeout實現
    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                setTimeout(callback, 1000 / 60);
            }
    })();

    init(); // 執行初始化函數

    // 定義初始化函數
    function init() {
        css(".heart{z-index:100000000;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); // 定義要生成的愛心的樣式
        attachEvent(); // 添加點擊事件（愛心生成）
        gameloop(); // 開始循環移除愛心（內含遞歸）
    }

    // 定義循環函數移除生成的愛心
    function gameloop() {
        for(var i = 0; i < hearts.length; i++) { // 循環hearts數組
            if(hearts[i].alpha <= 0) { // 如果當前循環的heart對象的透明度為0或小於0
                document.body.removeChild(hearts[i].el); // 從body對象中移除當前循環的heart對象（通過指針）
                hearts.splice(i, 1); // 從heart數組中移除當前循環的heart對象（通過下標）
                continue; // 跳過當前循環，進入下一個循環
            }
            hearts[i].y--; // y軸自減1
            hearts[i].scale += 0.004; // 縮放增加0.004
            hearts[i].alpha -= 0.013; // 透明度減少0.013
            hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
        }
        requestAnimationFrame(gameloop); // 定時器定時執行，遞歸
    }

    // 定義點擊事件函數
    function attachEvent() {
        var old = typeof window.onclick === "function" && window.onclick;
        window.onclick = function(event) {
            old && old();
            createHeart(event);
        }
    }

    // 定義創建愛心函數
    function createHeart(event) {
        var d = document.createElement("div"); // 創建一個div對象並賦值給變量d
        d.className = "heart"; // 給div對象添加類名
        hearts.push({ // 給hearts數組添加heart對象
            el: d, // div對象
            x: event.clientX - 5, // 鼠標當前位置x軸 - 5
            y: event.clientY - 5, // 鼠標當前位置y軸 - 5
            scale: 1, // 縮放
            alpha: 1, // 透明度
            color: randomColor() // 顏色（隨機顏色）
        });
        document.body.appendChild(d); // 添加創建的div對象到body對象
    }

    // 定義生成樣式函數
    function css(css) {
        var style = document.createElement("style"); // 創建一個style對象並賦值給變量style
        style.type = "text/css"; // 給style對象添加屬性並賦屬性值
        try {
            style.appendChild(document.createTextNode(css));
        } catch(ex) {
            style.styleSheet.cssText = css;
        }
        document.getElementsByTagName('head')[0].appendChild(style); // 添加創建的style對象到head對象
    }

    // 定義生成隨機顏色函數
    function randomColor() {
        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
    }
})(window, document);

我就是沒有特效，缺特效，自己寫特效，也不用別人寫的特效！

嘿嘿，真香。

 

"能傷害我的，都是我愛的。"