WordPress 主题添加鼠标跟随特效代码

将鼠标跟随特效分享给喜欢花草的朋友。这种鼠标跟随效果还是很酷的。它不是那种追随很多零零碎碎的鼠标效果。只有一个圆圈跟随鼠标指针。遇到超链接,圆圈会变成半透明背景,是国外网站常见的类型,国外网站常见的一种的特效,具体效果看本站。

添加方法非常简单,将下面代码添加到当前主题函数模板 functions.php 最后:

  1. // 加载jquery开始,如果主题已加载不加这段。
  2. function zm_jquery_script() {
  3. wp_enqueue_script( 'jquery' );
  4. }
  5. add_action( 'wp_enqueue_scripts', 'zm_jquery_script' );
  6. // 加载jquery结束
  7. function zm_mouse_cursor() { ?>
  8. <!-- 必须的DIV -->
  9. <div class="mouse-cursor cursor-outer"></div>
  10. <div class="mouse-cursor cursor-inner"></div>
  11. <!-- JS脚本 -->
  12. <script>
  13. jQuery(document).ready(function($){
  14. var myCursor = jQuery('.mouse-cursor');
  15. if (myCursor.length) {
  16. if ($('body')) {
  17. const e = document.querySelector('.cursor-inner'),
  18. t = document.querySelector('.cursor-outer');
  19. let n,
  20. i = 0,
  21. o = !1;
  22. window.onmousemove = function(s) {
  23. o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"),
  24. e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)",
  25. n = s.clientY,
  26. i = s.clientX
  27. },
  28. $('body').on("mouseenter", "a, .cursor-pointer",
  29. function() {
  30. e.classList.add('cursor-hover'),
  31. t.classList.add('cursor-hover')
  32. }),
  33. $('body').on("mouseleave", "a, .cursor-pointer",
  34. function() {
  35. $(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))
  36. }),
  37. e.style.visibility = "visible",
  38. t.style.visibility = "visible"
  39. }
  40. }
  41. })
  42. </script>
  43. <!-- 样式 -->
  44. <style>
  45. .mouse-cursor {
  46. position: fixed;
  47. left: 0;
  48. top: 0;
  49. pointer-events: none;
  50. border-radius: 50%;
  51. -webkit-transform: translateZ(0);
  52. transform: translateZ(0);
  53. visibility: hidden
  54. }
  55. .cursor-inner {
  56. margin-left: -3px;
  57. margin-top: -3px;
  58. width: 6px;
  59. height: 6px;
  60. z-index: 10000001;
  61. background: #ffa9a4;
  62. -webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;
  63. transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out
  64. }
  65. .cursor-inner.cursor-hover {
  66. margin-left: -18px;
  67. margin-top: -18px;
  68. width: 36px;
  69. height: 36px;
  70. background: #ffa9a4;
  71. opacity: .3
  72. }
  73. .cursor-outer {
  74. margin-left: -15px;
  75. margin-top: -15px;
  76. width: 30px;
  77. height: 30px;
  78. border: 2px solid #ffa9a4;
  79. -webkit-box-sizing: border-box;
  80. box-sizing: border-box;
  81. z-index: 10000000;
  82. opacity: .5;
  83. -webkit-transition: all .08s ease-out;
  84. transition: all .08s ease-out
  85. }
  86. .cursor-outer.cursor-hover {
  87. opacity: 0
  88. }
  89. .main-wrapper[data-magic-cursor=hide] .mouse-cursor {
  90. display: none;
  91. opacity: 0;
  92. visibility: hidden;
  93. position: absolute;
  94. z-index: -1111
  95. }
  96. </style>
  97. <?php }
  98. add_action( 'wp_footer', 'zm_mouse_cursor' );

因默认主题未加载 jquery,所以代码中添加了 WP 自带的 jquery,如果你的主题已加载了 jquery,则不加第一段的代码(有注释),大部分主题应该都加载了 jquery。

当然你也可以将样式添加到当前主题 style.css 中,包括 JS 代码也可以加到一个单独文件中加载。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

Idle User Logout - 登录空闲超时自动注销WordPress插件

2022-5-26 13:58:48

WordPress教程

如何去除 WP Rocket 插件隐藏页面中注释代码广告

2022-5-26 17:10:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索