WordPress 主题添加鼠标跟随特效

知更鸟 WordPress评论853阅读模式

2022年第一篇文章,分享个鼠标跟随特效,给喜欢花花草草的朋友们。这个鼠标跟随特效还是很酷,不是那种鼠标后面跟随一大堆零零碎碎的,仅一个圆圈跟随鼠标指针,当遇到超链接圆圈会变成半透明的背景,国外网站常见的一种的特效,具体效果看本站。

文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

WordPress 主题添加鼠标跟随特效

WordPress 主题添加鼠标跟随特效

文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

添加方法非常简单,将下面代码添加到当前主题函数模板 functions.php 最后:文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

// 加载jquery开始,如果主题已加载不加这段。
function zm_jquery_script() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'zm_jquery_script' );
// 加载jquery结束
function zm_mouse_cursor() { ?>
<!-- 必须的DIV -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-- JS脚本 -->
<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>
<!-- 样式 -->
<style>
.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: #ffa9a4;
	-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: #ffa9a4;
	opacity: .3
}

.cursor-outer {
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	border: 2px solid #ffa9a4;
	-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
}
</style>
<?php }
add_action( 'wp_footer', 'zm_mouse_cursor' );

代码在 WordPress 默认主题 Twenty Twenty-One 中测试成功。文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

因默认主题未加载jquery,所以代码中添加了WP自带的jquery,如果你的主题已加载了jquery,则不加第一段的代码(有注释),大部分主题应该都加载了jquery。文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

当然你也可以将样式添加到当前主题style.css中,包括JS代码也可以加到一个单独文件中加载。文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html


附:不依赖jquery纯JS版文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

项目地址:https://github.com/seattleowl/Pointer.js文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

 文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html 文章源自知更鸟-https://zmingcx.com/wordpress-mouse-cursor.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定