个人博客主题模板给鼠标添加跟随特效教程

昨天写了一个网页鼠标特效的小玩具，当然代码不是我的，源自知更鸟，插件也很简单，但是考虑到不是所有人都喜欢用插件，包括我自己，所以今天抽空在写一个详细的教程，直接把代码写在主题里就不需要额外的开启插件了，代码都是一样的，只是稍微修改了一些，感谢作者，好了不废话了，教程如下。

一般主题模板都有预留自定义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;
}
}

最后的那段代码的含义是在屏幕小于1023像素的时候隐藏这个特效，为什么呢？因为我在本地测试的时候发现，在移动端打开页面之后这个特效的鼠标会默认的停留在顶部左侧的位置，所以我就隐藏了，喜欢保留的可以删除最后那一段。

另外需要不喜欢默认的鼠标颜色可以自行替换修改，

“.cursor-inner”中“background:#999999;”为中心圆点的颜色代码。

“.cursor-outer”中“border: 2px solid #999999;”为外圆的颜色和2px标签边界像素。

“.cursor-inner.cursor-hover”中“background:#999999;”就是选中时的背景色。

以上颜色和边距可根据网站配色自行修改，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：关于鼠标特效网上的教程也是五花八门的，但是总体来说都是为网站锦上添花的操作，我比较喜欢简介的，所以没设置一些花里胡哨的特效，会让我觉得喧宾夺主，好了，仅是个人看好，这次教程文章完成了，继续更新主题模板啦，有问题留言反馈。