将鼠标跟随特效分享给喜欢花草的朋友。这种鼠标跟随效果还是很酷的。它不是那种追随很多零零碎碎的鼠标效果。只有一个圆圈跟随鼠标指针。遇到超链接，圆圈会变成半透明背景，是国外网站常见的类型，国外网站常见的一种的特效，具体效果看本站。
添加方法非常简单，将下面代码添加到当前主题函数模板 functions.php 最后：
- // 加载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' );
因默认主题未加载 jquery，所以代码中添加了 WP 自带的 jquery，如果你的主题已加载了 jquery，则不加第一段的代码（有注释），大部分主题应该都加载了 jquery。
当然你也可以将样式添加到当前主题 style.css 中，包括 JS 代码也可以加到一个单独文件中加载。
- 1、本站大部分内容均收集于网络，若内容侵犯到您的权益，请发送邮件至：service@wuyanshuo.cn,我们将第一时间处理！
- 2、本站资源所需价格并非资源售卖价格，是收集、整理、编辑以及本站运营的适当补贴，并且本站不提供任何免费技术服务。
- 3、所有资源仅限参考和学习，版权归原作者所有，更多请阅读无言说网络服务器协议。
