WordPress教程

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

PetitQPetitQ WordPress教程 2022-1-24 1.13K 0
收藏
阿里云

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

添加方法非常简单，将下面代码添加到当前主题函数模板 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.  
  43. </script>
  44. <!-- 样式 -->
  45. <style>
  46. .mouse-cursor {
  47. 	position: fixed;
  48. 	left: 0;
  49. 	top: 0;
  50. 	pointer-events: none;
  51. 	border-radius: 50%;
  52. 	-webkit-transform: translateZ(0);
  53. 	transform: translateZ(0);
  54. 	visibility: hidden
  55. }
  56.  
  57. .cursor-inner {
  58. 	margin-left: -3px;
  59. 	margin-top: -3px;
  60. 	width: 6px;
  61. 	height: 6px;
  62. 	z-index: 10000001;
  63. 	background: #ffa9a4;
  64. 	-webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;
  65. 	transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out
  66. }
  67.  
  68. .cursor-inner.cursor-hover {
  69. 	margin-left: -18px;
  70. 	margin-top: -18px;
  71. 	width: 36px;
  72. 	height: 36px;
  73. 	background: #ffa9a4;
  74. 	opacity: .3
  75. }
  76.  
  77. .cursor-outer {
  78. 	margin-left: -15px;
  79. 	margin-top: -15px;
  80. 	width: 30px;
  81. 	height: 30px;
  82. 	border: 2px solid #ffa9a4;
  83. 	-webkit-box-sizing: border-box;
  84. 	box-sizing: border-box;
  85. 	z-index: 10000000;
  86. 	opacity: .5;
  87. 	-webkit-transition: all .08s ease-out;
  88. 	transition: all .08s ease-out
  89. }
  90.  
  91. .cursor-outer.cursor-hover {
  92. 	opacity: 0
  93. }
  94.  
  95. .main-wrapper[data-magic-cursor=hide] .mouse-cursor {
  96. 	display: none;
  97. 	opacity: 0;
  98. 	visibility: hidden;
  99. 	position: absolute;
  100. 	z-index: -1111
  101. }
  102. </style>
  103. <?php }
  104. add_action( 'wp_footer', 'zm_mouse_cursor' );

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

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

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

已有 283 人购买
查看演示升级 VIP立刻购买

咨询客服 咨询客服

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录