可能是我没学好js,总觉得js的代码透露着一股诡异...
0.注意首先申请js权限。
1.鼠标单击:社会主义特效
1 <script type="text/javascript"> 2 https://www.dujin.org/9088.html */ 3 var a_idx = 0; 4 jQuery(document).ready(function($) { 5 $("body").click(function(e) { 6 var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 7 var $i = $("<span/>").text(a[a_idx]); 8 a_idx = (a_idx + 1) % a.length; 9 var x = e.pageX, 10 y = e.pageY; 11 $i.css({ 12 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 13 "top": y - 20, 14 "left": x, 15 "position": "absolute", 16 "font-weight": "bold", 17 "color": "#ff6651" 18 }); 19 $("body").append($i); 20 $i.animate({ 21 "top": y - 180, 22 "opacity": 0 23 }, 24 1500, 25 function() { 26 $i.remove(); 27 }); 28 }); 29 }); 30 </script>
(在“管理->设置”中的【页首Html代码】直接添加即可)
2.鼠标单击:小心心特效
1 <script type="text/javascript" > 2 3 //-------------------------------封装的 点击心 形 自动执行 4 !function(e, t,evt) { 5 // 元素属性赋值 6 function r() { 7 for (var e = 0; e < s.length; e++) 8 { 9 if(s[e].alpha <= 0) 10 { 11 t.body.removeChild(s[e].el), s.splice(e, 1); 12 }else{ 13 s[e].y--, 14 s[e].scale += .004, 15 s[e].alpha -= .013, 16 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"; 17 } 18 } 19 requestAnimationFrame(r); 20 return; 21 } 22 // 如果存在点击事件 执行动画 23 function n() { 24 var t = "function" == typeof e[evt] && e[evt]; 25 e[evt] = function(e) { 26 t && t(), o(e); 27 } 28 } 29 // 创建元素并且定义初始属性数组 30 function o(e) { 31 var a = t.createElement("div"); 32 a.className = "heart", s.push({ 33 el: a, 34 x: e.clientX - 5, 35 y: e.clientY - 5, 36 scale: 1, 37 alpha: 1, 38 color: c() 39 }), t.body.appendChild(a) 40 } 41 // 定义样式文件并添加 42 function i(e) { 43 var a = t.createElement("style"); 44 a.type = "text/css"; 45 try { 46 a.appendChild(t.createTextNode(e)) 47 } catch (t) { 48 a.styleSheet.cssText = e 49 } 50 t.getElementsByTagName("head")[0].appendChild(a) 51 } 52 // 返回随机色 53 function c() { 54 return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")" 55 } 56 // 执行动画兼容处理 57 var s = []; 58 e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || 59 function(e) { 60 setTimeout(e, 1e3 / 60) 61 }, i(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r() 62 }(window, document,‘onclick‘); 63 64 </script>
(在“管理->设置”中的【页首Html代码】直接添加即可)
3.鼠标单击:烟花+小心心特效
1 <script type="text/javascript" > 2 $(function(){ 3 var input_e=$("input"); 4 //javascript检测浏览器是否支持某些事件 5 //typeof input["oninput"] == "undefined" 6 7 var y=input_e.offset().top; 8 var x=input_e.offset().left; 9 var len=0; 10 var firewNum=15;// 烟花个数 11 11 // 点击页面 在鼠标位置 出现心形 烟花 12 $("body").click(function(ev){ 13 xin(ev); // 点击心形 14 Fireworks(ev)// 点击烟花 15 }); 16 17 // 鼠标点击出现心形 18 function xin(ev) 19 { 20 var color=randColor(); 21 var div=document.createElement("div"); 22 div.className=‘heart‘; 23 div.style.backgroundColor=color; 24 div.style.left=ev.pageX+‘px‘; 25 div.style.top=ev.pageY+‘px‘; 26 document.body.append(div); 27 var i=1; 28 var t=setInterval(function(){ 29 div.style.top=div.offsetTop-2+‘px‘; 30 i-=0.01; 31 div.style.opacity=i; 32 var scale=1+(1-i); 33 div.style.transform=‘scale(‘+scale+‘,‘+scale+‘) rotate(45deg)‘; 34 if(i<0.01 || div.style.top+div.offsetTop>=window.innerHeight) 35 { 36 div.remove(); 37 clearInterval(t); 38 } 39 },30) 40 } 41 42 // 随机色 43 function randColor() 44 { 45 var r=parseInt(Math.random()*256); 46 var g=parseInt(Math.random()*256); 47 var b=parseInt(Math.random()*256); 48 var a=Math.random().toFixed(1) 49 var color=‘rgba(‘+r+‘,‘+g+‘,‘+b+‘,‘+a+‘)‘; 50 return color; 51 } 52 53 // 创建烟花 54 function Fireworks(ev) 55 { 56 // 烟花一种颜色-- 90去掉注释 57 /*var color=randColor(); 58 for(var i=0;i<firewNum;i++) 59 { 60 create(ev,color); 61 }*/ 62 for(var i=0;i<firewNum;i++) 63 { 64 create(ev,null); 65 } 66 } 67 68 function create(ev,color) 69 {// 操作元素使用的 原生 js ,使用jquery 失败 取不到元素 70 var div=document.createElement("div"); 71 div.className=‘Fireworks‘; 72 div.style.backgroundColor=randColor(); 73 // div.style.backgroundColor=color; 74 div.style.left=ev.pageX+‘px‘; 75 div.style.top=ev.pageY+‘px‘; 76 document.body.append(div); 77 var i=1; 78 // 正负 -5右 +5左 79 var speedX =(parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*5 + 1); 80 // 向上 -0--17 81 var speedY=-parseInt(Math.random()*18); 82 83 var time=setInterval(function() 84 { 85 ++i; 86 var left=div.offsetLeft+speedX; 87 var top=div.offsetTop+speedY+i; 88 // 加 i top 越来越大, 烟花下落,否则烟花向上飘 每次获取得div.offsetTop越来越大 速度越来越慢 89 div.style.left=left+‘px‘; 90 div.style.top=top+‘px‘; 91 if(div.offsetLeft+div.offsetWidth>window.innerWidth || div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 ) 92 { 93 //如果超出屏幕 移除div 关闭定时器 94 div.remove(); 95 clearInterval(time); 96 } 97 98 },40) 99 } 100 }); 101 </script>
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;}
(添加两部分代码)