给鼠标添加跟随特效教程

寻梦xunm| 397| 收集

1年前

超过725天温馨提示

本文最后更新于2022年11月27日，已超过725天没有更新，若内容或图片失效，请留言反馈。

一般主题模板都有预留自定义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中就可以了，看了下基本上不会跟主题的代码有任何的冲突，如果是修改源代码的话记得备份，免费出错导致网站出错。

特效教程代码鼠标

0 赞 or 打赏

喜欢就打赏一点