Mkdocs中利用Js实现大小圈鼠标拖动样式

在docs/javascripts/extra.js下复制粘贴：

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这种），其他参数也可以自行摸索：

* {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添加如下代码：

/* 鼠标样式 */
#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);
}

这里比较重要的参数就是鼠标跟随的圆形颜色，可以根据自己的喜好进行更改：

#cursor {/* 这里改变跟随的底色 */background: rgb(57, 197, 187);
}

Note 注意⚠️：
需要在mkdocs.yml中引入js和css
extra_javascript: - javascripts/extra.js - javascripts/mathjax.js extra_css: - stylesheets/extra.css