mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 17:06:34 +00:00
162 lines
4.8 KiB
Markdown
162 lines
4.8 KiB
Markdown
---
|
||
title: JS实现鼠标样式
|
||
tags:
|
||
- Mkdocs
|
||
---
|
||
|
||
不建议更改，因为默认就是最简洁
|
||
|
||
<head>
|
||
<link rel="stylesheet" type="text/css" href="/stylesheets/shubiao.css">
|
||
<script src="/javascripts/shubiao.js"></script>
|
||
</head>
|
||
|
||
|
||
在`docs/javascripts/extra.js`下复制粘贴：
|
||
```java
|
||
var CURSOR;
|
||
|
||
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
|
||
|
||
const getStyle = (el, attr) => {
|
||
try {
|
||
return window.getComputedStyle
|
||
? window.getComputedStyle(el)[attr]
|
||
: el.currentStyle[attr];
|
||
} catch (e) {}
|
||
return "";
|
||
};
|
||
|
||
class Cursor {
|
||
constructor() {
|
||
this.pos = {curr: null, prev: null};
|
||
this.pt = [];
|
||
this.create();
|
||
this.init();
|
||
this.render();
|
||
}
|
||
|
||
move(left, top) {
|
||
this.cursor.style["left"] = `${left}px`;
|
||
this.cursor.style["top"] = `${top}px`;
|
||
}
|
||
|
||
create() {
|
||
if (!this.cursor) {
|
||
this.cursor = document.createElement("div");
|
||
this.cursor.id = "cursor";
|
||
this.cursor.classList.add("hidden");
|
||
document.body.append(this.cursor);
|
||
}
|
||
|
||
var el = document.getElementsByTagName('*');
|
||
for (let i = 0; i < el.length; i++)
|
||
if (getStyle(el[i], "cursor") == "pointer")
|
||
this.pt.push(el[i].outerHTML);
|
||
|
||
document.body.appendChild((this.scr = document.createElement("style")));
|
||
// 这里改变鼠标指针的颜色 由svg生成
|
||
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
|
||
}
|
||
|
||
refresh() {
|
||
this.scr.remove();
|
||
this.cursor.classList.remove("hover");
|
||
this.cursor.classList.remove("active");
|
||
this.pos = {curr: null, prev: null};
|
||
this.pt = [];
|
||
|
||
this.create();
|
||
this.init();
|
||
this.render();
|
||
}
|
||
|
||
init() {
|
||
document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
|
||
document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
|
||
document.onmousemove = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
|
||
document.onmouseenter = e => this.cursor.classList.remove("hidden");
|
||
document.onmouseleave = e => this.cursor.classList.add("hidden");
|
||
document.onmousedown = e => this.cursor.classList.add("active");
|
||
document.onmouseup = e => this.cursor.classList.remove("active");
|
||
}
|
||
|
||
render() {
|
||
if (this.pos.prev) {
|
||
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
|
||
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
|
||
this.move(this.pos.prev.x, this.pos.prev.y);
|
||
} else {
|
||
this.pos.prev = this.pos.curr;
|
||
}
|
||
requestAnimationFrame(() => this.render());
|
||
}
|
||
}
|
||
|
||
(() => {
|
||
CURSOR = new Cursor();
|
||
// 需要重新获取列表时，使用 CURSOR.refresh()
|
||
})();
|
||
```
|
||
其中比较重要的参数就是鼠标的尺寸和颜色，已经在上图中标出，目前发现颜色只支持RGB写法和固有名称写法（例如red这种），其他参数也可以自行摸索：
|
||
|
||
```java
|
||
* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>") 4 4, auto}`
|
||
```
|
||
|
||
在docs/stylesheets/extra.css添加如下代码：
|
||
```css
|
||
/* 鼠标样式 */
|
||
#cursor {
|
||
position: fixed;
|
||
width: 16px;
|
||
height: 16px;
|
||
/* 这里改变跟随的底色 */
|
||
background: var(--theme-color);
|
||
border-radius: 8px;
|
||
opacity: 0.25;
|
||
z-index: 10086;
|
||
pointer-events: none;
|
||
transition: 0.2s ease-in-out;
|
||
transition-property: background, opacity, transform;
|
||
}
|
||
|
||
#cursor.hidden {
|
||
opacity: 0;
|
||
}
|
||
|
||
#cursor.hover {
|
||
opacity: 0.1;
|
||
transform: scale(2.5);
|
||
-webkit-transform: scale(2.5);
|
||
-moz-transform: scale(2.5);
|
||
-ms-transform: scale(2.5);
|
||
-o-transform: scale(2.5);
|
||
}
|
||
|
||
#cursor.active {
|
||
opacity: 0.5;
|
||
transform: scale(0.5);
|
||
-webkit-transform: scale(0.5);
|
||
-moz-transform: scale(0.5);
|
||
-ms-transform: scale(0.5);
|
||
-o-transform: scale(0.5);
|
||
}
|
||
```
|
||
这里比较重要的参数就是鼠标跟随的圆形颜色，可以根据自己的喜好进行更改：
|
||
```css
|
||
#cursor {
|
||
/* 这里改变跟随的底色 */
|
||
background: rgb(57, 197, 187);
|
||
}
|
||
```
|
||
|
||
!!! Note "注意⚠️"
|
||
需要在mkdocs.yml中引入js和css
|
||
```
|
||
extra_javascript:
|
||
- javascripts/extra.js
|
||
- javascripts/mathjax.js
|
||
extra_css:
|
||
- stylesheets/extra.css
|
||
``` |