新方式博客
分享个鼠标跟随特效，给喜欢花花草草的朋友们。这个鼠标跟随特效还是很酷，不是那种鼠标后面跟随一大堆零零碎碎的，仅一个圆圈跟随鼠标指针，当遇到超链接圆圈会变成半透明的背景，国外网站常见的一种的特效，具体效果看本站。
WordPress 主题添加鼠标跟随特效
添加方法非常简单，将下面代码添加到当前主题函数模板 functions.php 最后：
// 加载jquery开始，如果主题已加载不加这段。
function zm_jquery_script() {
wp_enqueue_script( \'jquery\' );
}
add_action( \'wp_enqueue_scripts\', \'zm_jquery_script\' );
// 加载jquery结束
function zm_mouse_cursor() { ?>
<!-- 必须的DIV -->
<div class=\"mouse-cursor cursor-outer\"></div>
<div class=\"mouse-cursor cursor-inner\"></div>
<!-- JS脚本 -->
<script>
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\"
}
}
})
</script>
<!-- 样式 -->
<style>
.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
}
</style>
<?php }
add_action( \'wp_footer\', \'zm_mouse_cursor\' );
因默认主题未加载jquery，所以代码中添加了WP自带的jquery，如果你的主题已加载了jquery，则不加第一段的代码（有注释），大部分主题应该都加载了jquery。
当然你也可以将样式添加到当前主题style.css中，包括JS代码也可以加到一个单独文件中加载。
