JS鼠标点击爱心，文字特效

很久之前  博客   就使用了很多花里胡哨的东西，比如Live2D模型，背景，文字，页面离开载入，鼠标点击，浮动，滚动等等。

在网上也有很多这样案例，之前使用的是原生的js文字点击特效。

后面JQ也添加了此效果，于是转移用JQ了，简单好用。

效果浏览地址：  JS鼠标点击爱心，文字特效 

文字可替换。

 1 function ShuBiao() {
 2     var a_idx = 0;
 3     jQuery(document).ready(function ($) {
 4         $("body").click(function (e) {
 5             var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
 6             var $i = $("<span/>").text(a[a_idx]);
 7             a_idx = (a_idx + 1) % a.length;
 8             var x = e.pageX,y = e.pageY;
 9             $i.css({"z-index": -1,"top": y - 20,"left": x,"position": "absolute","color": "#FFF","font-size": "14px"});
10             $("body").append($i);
11             $i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});
12         });
13     });
14 }

 

爱心效果：

 1 //鼠标点击爱心特效  放入js中即可
 2     !function (e, t, a) {
 3     function r() {
 4         for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y-- , s[e].scale += .004, s[e].alpha -= .013, 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");
 5         requestAnimationFrame(r)
 6     }
 7     function n() {
 8         var t = "function" == typeof e.onclick && e.onclick;
 9         e.onclick = function (e) {
10             t && t(),
11                 o(e);
12         };
13     }
14
15　　代码展开

 

转载于:https://www.cnblogs.com/AmayaYi/p/11131483.html