当前位置:主页 > JavsScript库 > 其它 >

创意自定义光标库 - MagicMouse.js
栏目分类:其它   发布日期:2021-08-26   浏览次数:

MagicMouse.js 是一个自定义光标库,用于创建一个很酷的交互式光标,该光标带有一个跟随鼠标指针的圆圈。

如何使用它:

1.插入magic-mouse.css和magic_mouse.js从dis笔夹。

<link href="dist/magic-mouse.css" rel="stylesheet" />
<script src="dist/magic_mouse.js"></script>

2. 使用默认选项初始化 MagicMouse.js。

magicMouse();

3. 如果需要,隐藏系统光标。

html,* { cursor: none; }

4. 对自定义光标应用悬停效果。

<button class="magic-hover magic-hover__square">
  Hover Me
</button>

5.自定义光标效果。

magicMouse({
  "hoverEffect": "circle-move"
});

6. 禁用外圆。

magicMouse({
  "cursorOuter": "disable",
});

7. 改用默认光标。

magicMouse({
  "defaultCursor": true
});

8. 设置外圆的大小。

magicMouse({
  "outerWidth": 30,
  "outerHeight": 30
});

9. 通过将no-cursor类添加到目标元素来禁用魔术光标。

<div class="no-cursor">
...
</div>


官方网站:https://magicmousejs.web.app/

相关热词: MagicMouse.j光标

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库