建站教程

Products

当前位置：首页 > 建站教程 >

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

GG网络技术分享 2025-03-18 16:05 0

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

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

// 加载jquery开始，如果主题已加载不加这段。

```
function zm_jquery_script() {
```
```
wp_enqueue_script( 'jquery' );
```
```
}
```

add_action( 'wp_enqueue_scripts', 'zm_jquery_script' );

```
// 加载jquery结束
```
```
function zm_mouse_cursor() { ?>
```
```
jQuery(document).ready(function($){
```
```
var myCursor = jQuery('.mouse-cursor');
```
```
if (myCursor.length) {
```
```
if ($('body')) {
```

const e = document.querySelector('.cursor-inner'),

t = document.querySelector('.cursor-outer');

```
let n,
```
```
i = 0,
```
```
o = !1;
```
```
window.onmousemove = function(s) {
```

o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"),

e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)",

```
n = s.clientY,
```
```
i = s.clientX
```
```
},
```

$('body').on("mouseenter", "a, .cursor-pointer",

```
function() {
```
```
e.classList.add('cursor-hover'),
```
```
t.classList.add('cursor-hover')
```
```
}),
```

$('body').on("mouseleave", "a, .cursor-pointer",

```
function() {
```

$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))

```
}),
```
```
e.style.visibility = "visible",
```
```
t.style.visibility = "visible"
```
```
}
```
```
}
```
```
})
```
```
 
```
```
.mouse-cursor {
```
```
position: fixed;
```
```
left: 0;
```
```
top: 0;
```
```
pointer-events: none;
```
```
border-radius: 50%;
```
```
-webkit-transform: translateZ(0);
```
```
transform: translateZ(0);
```
```
visibility: hidden
```
```
}
```
```
 
```
```
.cursor-inner {
```
```
margin-left: -3px;
```
```
margin-top: -3px;
```
```
width: 6px;
```
```
height: 6px;
```
```
z-index: 10000001;
```
```
background: #ffa9a4;
```

-webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;

transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out

```
}
```
```
 
```
```
.cursor-inner.cursor-hover {
```
```
margin-left: -18px;
```
```
margin-top: -18px;
```
```
width: 36px;
```
```
height: 36px;
```
```
background: #ffa9a4;
```
```
opacity: .3
```
```
}
```
```
 
```
```
.cursor-outer {
```
```
margin-left: -15px;
```
```
margin-top: -15px;
```
```
width: 30px;
```
```
height: 30px;
```
```
border: 2px solid #ffa9a4;
```
```
-webkit-box-sizing: border-box;
```
```
box-sizing: border-box;
```
```
z-index: 10000000;
```
```
opacity: .5;
```
```
-webkit-transition: all .08s ease-out;
```
```
transition: all .08s ease-out
```
```
}
```
```
 
```
```
.cursor-outer.cursor-hover {
```
```
opacity: 0
```
```
}
```
```
 
```

.main-wrapper[data-magic-cursor=hide] .mouse-cursor {

```
display: none;
```
```
opacity: 0;
```
```
visibility: hidden;
```
```
position: absolute;
```
```
z-index: -1111
```
```
}
```
```
}
```

add_action( 'wp_footer', 'zm_mouse_cursor' );

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

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

标签： WordPress 教程

上一篇：如何去除 WP Rocket 插件隐藏页面中注释代码广告
下一篇： Idle User Logout - 登录空闲超时自动注销WordPress插件

为您推荐

提交需求或反馈

Demand feedback

首页
电话
客服

QQ在线客服

售前技术支持

关注微信
顶部