wordpress用js+css实现给鼠标添加跟随特效方法

今天抽空在写一个用js+css实现给鼠标添加跟随特效方法的详细教程，直接把代码写在主题里就不需要额外的开启插件了，代码都是一样的，只是稍微修改了一些，感谢作者，好了不废话了，教程如下。

一般主题模板都有预留自定义css和统计代码接口，我们需要用这两个接口实现鼠标特效，为什么不直接在主题模板中修改，因为修改源代码之后我们再次更新会导致主题模板恢复，那么我们修改的代码就没有了，还得重新添加，所以我们不直接在模板中修改。代码总共分为css和js两种，以我的主题为例，登录后台，主题设置，找到自定义css接口，复制如下css代码：

.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:#999999;
	-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:#999999;
	opacity:.58
}
.cursor-outer {
	margin-left:-15px;
	margin-top:-15px;
	width:30px;
	height:30px;
	border:2px solid #999999;
	-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
}
@media screen and (max-width:1023px) {
	.mouse-cursor {
	display:none;
}
}

以上颜色和边距可根据网站配色自行修改，css代码设置完成后，我们在主题设置中找到广告设置（脚本代码接口）或者统计接口，复制和粘贴如下代码：

<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<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>

设置完成后，保存，后台首页，清空缓存编译即可，如果是其他类型的程序，直接放在把css代码放在样式文件中，把js代码放在footer中就可以了，看了下基本上不会跟主题的代码有任何的冲突，如果是修改源代码的话记得备份，免费出错导致网站出错。

PS：关于鼠标特效网上的教程也是五花八门的，但是总体来说都是为网站锦上添花的操作，我比较喜欢简介的，所以没设置一些花里胡哨的特效，会让我觉得喧宾夺主，好了，仅是个人看好，这次教程文章完成了，继续更新主题模板啦，有问题留言反馈。