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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s核心概念

一、集群架构与组件 1&#xff0c;相关组件 【1】 master node三个组件 k8s的控制节点&#xff0c;对集群进行调度管理&#xff0c;接受集群外用户去集群操作请求master node 组成&#xff08;四个组件&#xff09;&#xff1a;控制面 API Server&#xff1a;通信kube-Sche…

大模型的淘金时代,HPE给出了一份智能经济“奇点”攻略

进入2023年&#xff0c;ChatGPT引发了一个新的AI时代——大模型时代。陆奇说&#xff1a;“我已经跟不上大模型时代的狂飙速度了&#xff01;”大模型引发了AI产业整体升级换代&#xff0c;各种大模型层出不穷&#xff0c;科技公司纷纷入局&#xff0c;AI创业公司再次雨后春笋般…

【LeetCode】79.单词搜索

题目 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或…

LabVIEW开发环境试验箱控制器

LabVIEW开发环境试验箱控制器 环境或气候试验箱是一种外壳&#xff0c;用于模拟各种材料&#xff08;包括工业产品、生物物质、复合材料、电子设备和航空航天部件&#xff09;的特定环境条件&#xff0c;并评估调节对这些材料的影响。 环境试验箱&#xff08;ETC&#xff09;…

08.计算机网络——其他重要协议和技术

文章目录 DNSICMPNAT代理服务器 DNS DNS是一整套从域名映射到IP的系统 ​ TCP/IP中使用IP地址和端口号来确定网络上的一台主机的一个程序&#xff0c;但是IP地址不方便记忆&#xff0c;于是人们发明域名&#xff0c;其本质是一个字符串&#xff0c;映射了它和IP地址的关系。 …

【iOS】—— RunLoop和多线程相关问题总结

RunLoop 1. 讲讲RunLoop&#xff0c;项目中有用到过吗&#xff1f; RunLoop 的基本作用&#xff1a;保持程序的持续运行&#xff0c;节省 CPU 的资源&#xff0c;提高程序的性能 &#xff08; 没有事情&#xff0c;就请休眠&#xff0c;不要功耗。有事情&#xff0c;就处理&a…

【JavaSE】运算符

【本节目标】 1. 熟练掌握各种运算符 这部分内容和C语言的位运算相似&#xff0c;可以参考这篇文章&#xff1a;【C语言】操作符详解 目录 1. 什么是运算符 2. 算术运算符 3. 关系运算符 4. 逻辑运算符 5. 位运算符 6. 移位运算(了解) 7. 条件运算符 1. 什么是运算符 …

day31贪心算法 用最少数量的箭引爆气球 和无重叠区间

题目描述 题目分析&#xff1a; x轴向上射箭&#xff0c;12一支&#xff0c;重叠的需要一支&#xff0c;3-8一支&#xff0c;7-16一支 返回2&#xff1b; 就是让重叠的气球尽量在一起&#xff0c;局部最优&#xff1b;用一支弓箭&#xff0c;全局最优就是最少弓箭&#xff1b…

SQL ORDER BY 关键字

ORDER BY 关键字用于对结果集进行排序。 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序。 ORDER BY 关键字默认按照升序对记录进行排序。如果需要按照降序对记录进行排序&#xff0c;您可以使用 DESC 关键字。 ORDER BY 子句后面的列名指示按哪些列进行排序。如…

如何才能做Cox呢?今天带来Cox回归分析步骤详解

Cox回归是生存分析中运用最多的一个模型&#xff0c;又称为比例风险回归模型(proportional hazards model)。是由英国统计学家D.R.Cox在1962年提出的&#xff0c;为了表示对他的尊敬&#xff0c;所以大家以他的名字命名这个模型。这是一种半参数回归模型&#xff0c;以结局和生…

数据结构【绪论】

数据结构入门级 第一章绪论 什么是数据结构&#xff1f;什么是数据类型&#xff1f; 程序数据结构算法 一、基本概念&#xff1a; 数据&#xff1a;指所有能被计算机处理的&#xff0c;无论图、文字、符号等。数据元素&#xff1a;数据的基本单位&#xff0c;通常作为整体考…

快速上手Webpack打包指南:用简单的步骤掌握Webpack的使用技巧

目录 概念&#xff1a;1. webpack 打包简介1.0 多个 JS 文件打包&#xff1a;1.1 webpack 数组形式1.2 webpack 对象形式 总结 Webpack的打包过程可以总结为以下几个步骤&#xff1a; 1.入口点配置&#xff1a;在Webpack的配置文件中&#xff0c;我们需要指定一个或多个入口点…

数据接口有哪些?(数据接口有哪几种)

数据接口是指不同应用程序或系统之间交换数据的通信界面。在现代信息化社会中&#xff0c;数据接口扮演着极为重要的角色&#xff0c;它们使得不同平台之间能够相互连接和交流&#xff0c;从而实现数据共享和应用集成。 数据接口的种类繁多&#xff0c;常见的有以下几种&#…

SpringBoot开发小技巧使用(DEBUG、启动图标修改、Lombok、devtools、Spring Initializr)

目录 1. 通过DEBUG查看自动配置的组件2. springboot启动图标修改3. Lombok4. devtools5. 通过IDEA的Spring Initializr快速创建新项目 1. 通过DEBUG查看自动配置的组件 在resources/application.properties中添加如下&#xff0c;开启DEBUG功能&#xff1a; debugtrue然后启动…

SpringBoot 集成 EasyExcel 3.x 优雅实现 Excel 导入导出

介绍 EasyExcel 是一个基于 Java 的、快速、简洁、解决大文件内存溢出的 Excel 处理工具。它能让你在不用考虑性能、内存的等因素的情况下&#xff0c;快速完成 Excel 的读、写等功能。 EasyExcel文档地址&#xff1a; https://easyexcel.opensource.alibaba.com/ 快速开始 …

前后端分离windows本地nginx解决跨域

下载 http://nginx.org/en/download.html 命令 启动Nginx&#xff1a; nginx.exe start 快速停止或关闭Nginx&#xff1a; nginx.exe -s stop 正常停止或关闭Nginx&#xff1a; nginx.exe -s quit 配置文件修改重装载命令&#xff1a; nginx.exe -s reload 强制停用…

SQL调优教程

SQL调优教程 基础方法论 任何计算机应用系统性能问题最终都可以归结为 1.cpu消耗 2.内存使用 3.对磁盘&#xff0c;网络或其他I/O设备的输入/输出(I/O)操作 遇到性能问题时&#xff0c;要判断的第一点就是“在这三种资源中&#xff0c;是否有哪一种资源达到了有问题的程度”&…

Linux环境下Elasticsearch相关软件安装

Linux环境下Elasticsearch相关软件安装 本文将介绍在linux(Centos7)环境下安装Elasticsearch相关的软件。 1、安装Elasticsearch 1.1 Elasticsearch下载 首先去Elasticsearch官网下载相应版本的安装包&#xff0c;下载之后传输到linux服务器上。 官网地址&#xff1a;http…

Python采集某网站小视频内容, m3u8视频内容下载

目录标题 前言环境使用:模块使用:代码实现步骤代码展示尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 环境使用: python 3.8 运行代码 pycharm 2021.2 辅助敲代码 模块使用: import requests >>> pip install requests 内置模块 你安装好python环境就…

Windows 微信更新内核(小程序框架)的指南

WMPF-PC 更新指引&#xff1a; 准备工作 1. 安装最新微信客户端&#xff08; https://dldir1.qq.com/weixin/Windows/WeChatSetup.exe &#xff09; 2. 在微信在搜索栏输入:showcmdwnd (包括前面冒号) 中输入以下代码以开启 wmpf 新内核版本(已经是现网默认&#xff0c;可以…