可能是我没学好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>
【页首Html代码】
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;}
【页面定制CSS代码】
（添加两部分代码）
原文地址：https://www.cnblogs.com/travelller/p/8526165.html
时间： 2024-11-09 05:44:25