css :
1 body{width:1000px; height:500px;} 2 input{ margin:100px; width:250px; height: 50px } 3 .Fireworks{width:4px; height: 4px; position: absolute;} 4 .heart{width: 10px;height: 10px;position: fixed;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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}
js: <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
js:
1 $(function(){ 2 var input_e=$("input"); 3 //javascript检测浏览器是否支持某些事件 4 //typeof input["oninput"] == "undefined" 5 6 var y=input_e.offset().top; 7 var x=input_e.offset().left; 8 var len=0; 9 var firewNum=15;// 烟花个数 10 11 // 点击页面 在鼠标位置 出现心形 烟花 15 $("body").click(function(ev){ 16 xin(ev); // 点击心形 17 Fireworks(ev)// 点击烟花 18 }); 19 20 // 鼠标点击出现心形 21 function xin(ev) 22 { 23 var color=randColor(); 24 var div=document.createElement("div"); 25 div.className='heart'; 26 div.style.backgroundColor=color; 27 div.style.left=ev.pageX+'px'; 28 div.style.top=ev.pageY+'px';
//解决滚动屏幕后心形不在点击位置问题
div.style.position='absolute'; 29 document.body.append(div); 30 var i=1; 31 var t=setInterval(function(){ 32 div.style.top=div.offsetTop-2+'px'; 33 i-=0.01; 34 div.style.opacity=i; 35 var scale=1+(1-i); 36 div.style.transform='scale('+scale+','+scale+') rotate(45deg)'; 37 if(i<0.01 || div.style.top+div.offsetTop>=window.innerHeight) 38 { 39 div.remove(); 40 clearInterval(t); 41 } 42 },30) 43 } 44 45 // 随机色 46 function randColor() 47 { 48 var r=parseInt(Math.random()*256); 49 var g=parseInt(Math.random()*256); 50 var b=parseInt(Math.random()*256); 51 var a=Math.random().toFixed(1) 52 var color='rgba('+r+','+g+','+b+','+a+')'; 53 return color; 54 } 55 56 // 创建烟花 57 function Fireworks(ev) 58 { 59 // 烟花一种颜色-- 90去掉注释 60 /*var color=randColor(); 61 for(var i=0;i<firewNum;i++) 62 { 63 create(ev,color); 64 }*/ 65 for(var i=0;i<firewNum;i++) 66 { 67 create(ev,null); 68 } 69 } 70 71 function create(ev,color) 72 {// 操作元素使用的 原生 js ,使用jquery 失败 取不到元素 73 var div=document.createElement("div"); 74 div.className='Fireworks'; 75 div.style.backgroundColor=randColor(); 76 // div.style.backgroundColor=color; 77 div.style.left=ev.pageX+'px'; 78 div.style.top=ev.pageY+'px';
//解决滚动屏幕后心形不在点击位置问题
div.style.position='absolute'; 79 document.body.append(div); 80 var i=1; 81 // 正负 -5右 +5左 82 var speedX =(parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*5 + 1); 83 // 向上 -0--17 84 var speedY=-parseInt(Math.random()*18); 85 86 var time=setInterval(function() 87 { 88 ++i; 89 var left=div.offsetLeft+speedX; 90 var top=div.offsetTop+speedY+i; 91 // 加 i top 越来越大， 烟花下落，否则烟花向上飘 每次获取得div.offsetTop越来越大 速度越来越慢 92 div.style.left=left+'px'; 93 div.style.top=top+'px';
//解决滚动屏幕后点击不出现烟花问题 div.offsetTop+div.offsetHeight>window.innerHeight 改为 div.offsetTop+div.offsetHeight-document.documentElement.scrollTop>window.innerHeight 94 if(div.offsetLeft+div.offsetWidth>window.innerWidth || div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 ) 95 { 96 //如果超出屏幕 移除div 关闭定时器 97 div.remove(); 98 clearInterval(time); 99 } 100 101 },40) 102 } 103 });
另一种封装的点击页面出现心形
1 //-------------------------------封装的 点击心 形 自动执行 2 !function(e, t,evt) { 3 // 元素属性赋值 4 function r() { 5 for (var e = 0; e < s.length; e++) 6 { 7 if(s[e].alpha <= 0) 8 { 9 t.body.removeChild(s[e].el), s.splice(e, 1); 10 }else{ 11 s[e].y--, 12 s[e].scale += .004, 13 s[e].alpha -= .013, 14 s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999"; 15 } 16 } 17 requestAnimationFrame(r); 18 return; 19 } 20 // 如果存在点击事件 执行动画 21 function n() { 22 var t = "function" == typeof e[evt] && e[evt]; 23 e[evt] = function(e) { 24 t && t(), o(e); 25 } 26 } 27 // 创建元素并且定义初始属性数组 28 function o(e) { 29 var a = t.createElement("div"); 30 a.className = "heart", s.push({ 31 el: a, 32 x: e.clientX - 5, 33 y: e.clientY - 5, 34 scale: 1, 35 alpha: 1, 36 color: c() 37 }), t.body.appendChild(a) 38 } 39 // 定义样式文件并添加 40 function i(e) { 41 var a = t.createElement("style"); 42 a.type = "text/css"; 43 try { 44 a.appendChild(t.createTextNode(e)) 45 } catch (t) { 46 a.styleSheet.cssText = e 47 } 48 t.getElementsByTagName("head")[0].appendChild(a) 49 } 50 // 返回随机色 51 function c() { 52 return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")" 53 } 54 // 执行动画兼容处理 55 var s = []; 56 e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || 57 function(e) { 58 setTimeout(e, 1e3 / 60) 59 }, i(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r() 60 }(window, document,'onclick');