今天抽空在写一个用js+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:关于鼠标特效网上的教程也是五花八门的,但是总体来说都是为网站锦上添花的操作,我比较喜欢简介的,所以没设置一些花里胡哨的特效,会让我觉得喧宾夺主,好了,仅是个人看好,这次教程文章完成了,继续更新主题模板啦,有问题留言反馈。