html点击效果怎么加,博客园添加鼠标点击特效

(function(window, document, undefined) {var hearts =[];

window.requestAnimationFrame= (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

setTimeout(callback,1000 / 60);

}

})();

init();functioninit() {

css(".heart{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();

}functiongameloop() {for (var i = 0; i < hearts.length; i++) {if (hearts[i].alpha <= 0) {

document.body.removeChild(hearts[i].el);

hearts.splice(i,1);continue;

}

hearts[i].y--;

hearts[i].scale+= 0.004;

hearts[i].alpha-= 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);

}functionattachEvent() {var old = typeof window.onclick === "function" &&window.onclick;

window.οnclick= function(event) {

old&&old();

createHeart(event);

}

}functioncreateHeart(event) {var d = document.createElement("div");

d.className= "heart";

hearts.push({

el: d,

x: event.clientX- 5,

y: event.clientY- 5,

scale:1,

alpha:1,

color: randomColor()

});

document.body.appendChild(d);

}functioncss(css) {var style = document.createElement("style");

style.type= "text/css";try{

style.appendChild(document.createTextNode(css));

}catch(ex) {

style.styleSheet.cssText=css;

}

document.getElementsByTagName('head')[0].appendChild(style);

}functionrandomColor() {return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";

}

})(window, document);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值