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

2021年3月18日13:53:13 发表评论
广告也精彩

新建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:

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