鼠标点击网页出现爱心特效
有些网站在鼠标点击的时候有添加+1这种红色数字慢慢变大变淡的淡出和上升效果，觉得蛮有趣的，但是不管是随机数字还是累积数字，用久了闲鱼觉得还是蛮单调的，而这里闲鱼要介绍的就是一个将数字变成一个爱心物件淡出的效果，作为页面的装饰，点击鼠标的时候就会弹出这种意外的小惊喜，然后消失，会让网页不会显得那么单调。
一、部署JS代码（将以下代码保存为js文件，文件名：love.js，然后直接引入使用，点击页面任意位置就可以看到效果了）
- (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();
- function init(){
- 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();
- }
- function gameloop(){
- 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);
- }
- 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");
- 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);
- }
- function css(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);
- }
- function randomColor(){
- return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
- }
- })(window,document);
二、js调用地址
<pre class="wp-block-code language-undefined"><code class="language- language-undefined"><!--给WordPress网站添加鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="调用js的地址"></script></code></pre>
[button]JS下载[/button]
联系方式
- no entry
- no entry
- no entry
- no entry
