【帆软FR】鼠标点击、悬浮炫彩效果

一、描述
1.1 应用场景：想要页面随意点击的时候页面能够弹出炫彩的字体，并且希望鼠标悬浮的时候背景能够动态变化，大屏展示的时候效果炫酷。

1.2 功能介绍：鼠标点击炫彩效果是无论是cpt还是frm模板，页面展示的时候鼠标任意点击不仅不影响页面功能使用，还能够弹出炫彩的字体；鼠标悬浮炫彩效果多应用于大屏动态背景的效果，当鼠标不悬浮在屏幕上面的时候背景是动态变化的，鼠标悬浮在页面上时有汇聚的效果，通过演示这个模板，能够熟练掌握这一系列的相关需求。

二、示例
2.1 鼠标点击炫彩字体提示效果1、在模板web属性添加加载结束事件，如下代码：代码解释：a数组里面存储的是每次点击循环展示的内容，css里面写的是一些样式设置。

1. <span data-offset-key="t6j0-0-0">var a_idx = 0;
   
2.     jQuery(document).ready(function ($) {
   
3.         $("body").click(function (e) {
   
4. console.log("xxxxxx")
   
5. var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
   
6. var $i = $("<span></span>").text(a[a_idx]);
   
7.             a_idx = (a_idx + 1) % a.length;
   
8. var x = e.pageX,
   
9.                 y = e.pageY;
   
10.             $i.css({
    
11. "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
    
12. "top": y - 20,
    
13. "left": x,
    
14. "position": "absolute",
    
15. "font-weight": "bold",
    
16. "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    
17. </span><span data-offset-key="t6j0-0-1" style="font-style: italic;">//Math.random()返回介于 0（包含） ~ 1（不包含） 之间的一个随机数</span><span data-offset-key="t6j0-0-2">
    
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.     });</span>

复制代码

2.2 动态背景、鼠标悬浮粒子汇聚效果1、在模板web属性添加加载结束事件，如下代码：代码解释：主要是看return里面返回的信息是悬浮背景粒子的透明度、颜色以及粒子的个数设置。

1. <span data-offset-key="t6j0-0-2">function() {
   
2. function o(w, v, i) {
   
3. return w.getAttribute(v) || i
   
4.     }
   
5. function j(i) {
   
6. return document.getElementsByTagName(i)
   
7.     }
   
8. function l() {
   
9. var i = j("script"),
   
10.         w = i.length,
    
11.         v = i[w - 1];
    
12. return {
    
13.             l: w,
    
14.             z: o(v, "zIndex", 0),
    
15.             o: o(v, "opacity", 0.8),</span><span data-offset-key="t6j0-0-3" style="font-style: italic;">//粒子的透明度</span><span data-offset-key="t6j0-0-4">
    
16.             c: o(v, "color", "13,100,273"),</span><span data-offset-key="t6j0-0-5" style="font-style: italic;">//粒子的颜色设置</span><span data-offset-key="t6j0-0-6">
    
17.             n: o(v, "count", 300)</span><span data-offset-key="t6j0-0-7" style="font-style: italic;">//粒子的个数</span><span data-offset-key="t6j0-0-8">
    
18.         }
    
19.     }
    
20. function k() {
    
21.         r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    
22.         n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    
23.     }
    
24. function b() {
    
25.         e.clearRect(0, 0, r, n);
    
26. var w = [f].concat(t);
    
27. var x, v, A, B, z, y;
    
28.         t.forEach(function(i) {
    
29.             i.x += i.xa,
    
30.             i.y += i.ya,
    
31.             i.xa *= i.x > r || i.x < 0 ? -1 : 1,
    
32.             i.ya *= i.y > n || i.y < 0 ? -1 : 1,
    
33.             e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
    
34. for (v = 0; v < w.length; v++) {
    
35.                 x = w[v];
    
36. if (i !== x && null !== x.x && null !== x.y) {
    
37.                     B = i.x - x.x,
    
38.                     z = i.y - x.y,
    
39.                     y = B * B + z * z;
    
40.                     y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
    
41.                 }
    
42.             }
    
43.             w.splice(w.indexOf(i), 1)
    
44.         }),
    
45.         m(b)
    
46.     }
    
47. var u = document.createElement("canvas"),
    
48.     s = l(),
    
49.     c = "c_n" + s.l,
    
50.     e = u.getContext("2d"),
    
51.     r,
    
52.     n,
    
53.     m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    
54. function(i) {
    
55. window.setTimeout(i, 1000 / 45)
    
56.     },
    
57.     a = Math.random,
    
58.     f = {
    
59.         x: null,
    
60.         y: null,
    
61.         max: 20000
    
62.     };
    
63.     u.id = c;
    
64.     u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
    
65.     j("body")[0].appendChild(u);
    
66.     k(),
    
67. window.onresize = k;
    
68. window.onmousemove = function(i) {
    
69.         i = i || window.event,
    
70.         f.x = i.clientX,
    
71.         f.y = i.clientY
    
72.     },
    
73. window.onmouseout = function() {
    
74.         f.x = null,
    
75.         f.y = null
    
76.     };
    
77. for (var t = [], p = 0; s.n > p; p++) {
    
78. var h = a() * r,
    
79.         g = a() * n,
    
80.         q = 2 * a() - 1,
    
81.         d = 2 * a() - 1;
    
82.         t.push({
    
83.             x: h,
    
84.             y: g,
    
85.             xa: q,
    
86.             ya: d,
    
87.             max: 6000
    
88.         })
    
89.     }
    
90.     setTimeout(function() {
    
91.         b()
    
92.     },
    
93. 100)
    
94. } ();</span>

复制代码

三、 效果查看
3.1鼠标点击炫彩字体提示cpt效果如下：



3.2 动态背景、鼠标悬浮粒子汇聚效果展示





移动端不支持

对你有帮助的话，可以点赞+关注+收藏，更多知识分享持续更新~

谢谢大神 很炫

9.0版本的会提示错误；

经常在网页上看到这种效果，现在才知道帆软也可以有，厉害

SyntaxError: Unexpected token '<'
报这个错，是什么原因呢？是直接复制代码到web属性里面的加载结束事件么？谢谢

楼主，复制代码放到加载结束事件后，页面提示这个错误

看着很炫酷，试一试。。

太完美了，比个赞