给WordPress主题添加鼠标点击特效

2021年3月18日13:53:13 发表评论
微信搜一搜 ts小陈

新建js文件，代码如下：

第一种，比较普通没什么特别

  1. <script type="text/javascript">
  2. /* 鼠标特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
  7.         var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
  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>

第二种，文字上美化了一下

  1. <script type="text/javascript">
  2. /* 鼠标特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("?","富强","?","民主","?","文明","?","和谐","?","自由","?","平等","?","公正","?","法治","?","爱国","?","敬业","?","诚信","?","友善");
  7.         var $i = $("<span></span>").text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9.         var x = e.pageX, 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.             "font-size": "10px",
  17.             "animation": "heartbeat .25s infinite .1s",
  18.             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
  19.         });
  20.         $("body").append($i);
  21.         $i.animate({
  22.             "top": y - 180,
  23.             "opacity": 0
  24.         },
  25.         1000,
  26.         function() {
  27.             $i.remove();
  28.         });
  29.     });
  30. });
  31. </script>

第三种，字体颜色随机，大小循环变小变大

  1. <script type="text/javascript">
  2. /* 鼠标特效 */
  3. $(function() {
  4.     var a_idx = 0,
  5.         b_idx = 0;
  6.     c_idx = 0;
  7.     jQuery(document).ready(function($) {
  8.         $("body").click(function(e) {
  9.             var a = new Array("欢迎您", "么么哒", "你真好", "棒棒哒", "真可爱", "你最美", "喜欢你", "真聪明", "爱你哦", "好厉害", "你真帅", "祝福你"),
  10.                 b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#ff5163", "#efff51"),
  11.                 c = new Array("12", "14", "16", "18", "20", "22", "24", "26", "28", "30");
  12.             var $i = $("<span/>").text(a[a_idx]);
  13.             a_idx = (a_idx + 1) % a.length;
  14.             b_idx = (b_idx + 1) % b.length;
  15.             c_idx = (c_idx + 1) % c.length;
  16.             var x = e.pageX,
  17.                 y = e.pageY;
  18.             $i.css({
  19.                 "z-index": 999,
  20.                 "top": y - 20,
  21.                 "left": x,
  22.                 "position": "absolute",
  23.                 "font-weight": "bold",
  24.                 "font-size": c[c_idx] + "px",
  25.                 "color": b[b_idx]
  26.             });
  27.             $("body").append($i);
  28.             $i.animate({
  29.                 "top": y - 180,
  30.                 "opacity": 0
  31.             }, 1500, function() {
  32.                 $i.remove();
  33.             });
  34.         });
  35.     });
  36.     var _hmt = _hmt || [];
  37. })
  38. </script>

第四种，数字点击特效

  1. <script>
  2. jQuery(document).ready(function($) {
  3. var _click_count=0;
  4. $("body").bind("click",function(e){ //直接给body一个事件好了.  
  5. var n=Math.round(Math.random()*100);//随机数  
  6. // var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素  
  7. var $i=$("<b>").text("+"+(++n));//添加到页面的元素  
  8. var x=e.pageX,y=e.pageY;//鼠标点击的位置  
  9. $i.css({
  10. "z-index":99999,
  11. "top":y-15,
  12. "left":x,
  13. "position":"absolute",
  14. "color":"red"
  15. });
  16. $("body").append($i);
  17. $i.animate(
  18. {"top":y-180,"opacity":0},
  19. 1500,
  20. function(){$i.remove();}
  21. );
  22. e.stopPropagation();
  23. });
  24. });
  25. </script>

在 WordPress 主题的 footer.php 文件中引用js即可

小陈号卡
ts小陈

发表评论（不允许含有网址！）

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容