WordPress 主题添加鼠标跟随特效代码

WordPress教程
22年7月15日
编辑

Joker织梦开发者

将鼠标跟随特效分享给喜欢花草的朋友。这种鼠标跟随效果还是很酷的。它不是那种追随很多零零碎碎的鼠标效果。只有一个圆圈跟随鼠标指针。遇到超链接，圆圈会变成半透明背景，是国外7 } ; G [网站常见的类型，国外网站常见的一种的特效，具体效果看本站。

添加方法非常简单，将下z u G u t B面K a _ w x h p T D代码添加到当前主题函数模板 functions.php 最后：

// 加载jquery开始，如果主题已加载不加这段。
function zm_jquery_script() {
wp_enqueue_script( 'jquek H \ % %ry' );
}
add_action( 'wp_enqueue_scriptsI O D o u ^ ~', 'zm_jquery_script' );
//f x ] 7 I 加载jquery结束
function zm_mouse_cursor() { ?>
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-a c e Y $ j- JS脚本 -->
<script>
jQuery(document).ready(function($){
var my9 R M ! x -Cursor = jQuery('.mo + b v ^ ? 1 / Pouse-cursor');
if (myCursor.length) {$ P 6 0 K & / + ]
if ($('body')) {
const e = document.querySelector('.cursor-inner'),
t = document.querySelY m T I : e ] Fector('.cursor-outer');
let n,
i = 0,Y r 0 a v 2
o = !1;
window.onmousemove = function(s) {
o || (t.style.transform = &quot\ 6 r v ; 5 ! B F;translate(" + s.clientX + "px, &quotS e Z s; + s.clientY + "px)"),
e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)",
n = s.clientY,
i = s.cli6 { ?entX
},
$('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") &amo N y Q r up;& $(tR Y K Z d / G 9 khis).closest(".cursor-pointer! N 1 j @", & e * V L h )).length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))
}),
e.style.visibility = "visible# t ; 2 Z",
t.styleI ( M P j B $.visibility = "visible"
}
}
})
</script>
&l& # P + {t;sw 2 ^ M Jtyle>} U k X S & W
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visiw x 9bility] f /: hidden
}
.cursor-inner {
margin-left: -3px;
mQ B _ u R z ` \ Nargin-top: -3px;
width: 6px;
height: 6px;
z-index: 10000001;
background: #ffa9a4;
-webkit-transition: wiP P G ! W \dth .3s ease-in-out,height .3s ease-in-out,margin .X g O . \3s ease-in-out,opacity .3s ease-in-out;
transition: width .4 6 p ^ :3s ease-in-out,height .3s ease-in-out,margin .3s ease-in+ ^ U-oW P nut,opacity .3s ease-in-out
}
.cursor-inner.cursor-hover {
margin-left: -18? U ! 0 % 9px;
margin-top: -18px;
width: 36px;
height: 36px;
background: #ffa9a4;
opacity: .3
}
.cursor-outer {
margin-left: -15px;
margin-top: -F W k15px;
width: 30px;
height: 30px;
border: 2px solid #ffa9a4;
-webkit-l ? h ) ] { r x -box-sizi| ) Cng: border-box;
box-sizing: border-box;
z-index: 10000000;x t , I E `
opacity: .5;
-webkit-transition: all .08s eas[ l d s I n W 5e-out;
transition: all .08s ease-out
}
.cursor-outer.cursor-hover {
opacity: 0
}
.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
di2 T ^ { \ $splay: n` ` \ g \ N X |one;
opacity:* @ # [ 0;
visibility: hidden;
position: absolute;
z-index: -1111
}
</style>
<?php }
add_actionH ) ^ ` } c G Q40; 'wp_footer', 'zm_mouse_cursor' );