javascript博客⿏标点击爱⼼特效的代码与代码解析
css鼠标点击样式这个⿏标点击出现爱⼼的特效经常在别的博客⾥见到，于是我查了度娘后拿来直接⽤上了。
虽然不知道原作者是谁，但肯定是个⼤神，只有通过观摩他/她的代码膜拜⼀下啦。
直接上代码（解析在代码注释⾥）：
// ⾃执⾏匿名函数
(function(window, document, undefined) { // 传⼊window，document对象
var hearts = []; // 定义全局变量hearts，值为空数组
// 定义不同浏览器下的requestAnimationFrame函数实现，如果都没有，则⽤setTimeout实现
questAnimationFrame ||
window.webkitRequestAnimationFrame ||
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: r
otate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';wid        attachEvent(); // 添加点击事件（爱⼼⽣成）
gameloop(); // 开始循环移除爱⼼（内含递归）
}
// 定义循环函数移除⽣成的爱⼼
function gameloop() {
for(var i = 0; i < hearts.length; i++) { // 循环hearts数组
if(hearts[i].alpha <= 0) { // 如果当前循环的heart对象的透明度为0或⼩于0
veChild(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 = lick === "function" && lick;
old && old();
createHeart(event);
}
}
// 定义创建爱⼼函数
function createHeart(event) {
var d = ateElement("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 = ateElement("style"); // 创建⼀个style对象并赋值给变量style
try {
style.ateTextNode(css));
} catch(ex) {
style.styleSheet.cssText = css;
}
}
// 定义⽣成随机颜⾊函数
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";    }
})(window, document);
我就是没有特效，缺特效，⾃⼰写特效，也不⽤别⼈写的特效！
嘿嘿，真⾹。
"能伤害我的，都是我爱的。"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。