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;…

CSS技巧::is()、 :where()、:has()伪元素的运用

:is()、:where() 和 :has() 伪元素是 CSS 中用于样式化元素的非常强大的工具。是在 CSS 选择器 Level 4 规范中引入的。允许将样式应用于符合特定条件的任何元素&#xff0c;例如元素的类型、元素的位置和元素的后代。 :is() :is() 伪类可以用于基于选择器的组合来定位元素。…

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

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

【Docker】Docker的数据管理和网络通信

Docker的数据管理和网络通信 一、Docker 的数据管理1. 数据卷2. 数据卷容器二、容器互联(使用centos镜像)三、 Docker 镜像的创建1. 基于己有镜像创建2. 基于本地模板创建3. 基于 Dockerfile 创建3.1 联合文件系统3.2 镜像加载原理3.3 为什么Docker里的centos的大小才200M?3…

zookeeper的核心概念

核心 集群角色 简介 通常在分布式系统中&#xff0c;构成一个集群的每一台机器都有自己的角色&#xff0c;最典型的集群模式就是Master/Slave模式&#xff08;主备模式) 在这种模式中&#xff0c;我们把能够处理所有写操作的机器称为Master机器&#xff0c;把所有通过异步复制…

【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. 什么是运算符 …

SQL 简介

SQL 简介 简介 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理和操作关系型数据库的标准化语言。它允许用户通过使用各种指令来创建、修改和查询数据库中的数据。 SQL具有几个主要组成部分&#xff1a; 数据定义语言&#…

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

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

机器学习前言

1.机器学习和统计学关系 2.机器学习的发展 3.机器学习与深度学习的相同点与不同点 4.机器学习和深度学习优缺点 一、机器学习和统计学关系 机器学习和统计学密切相关&#xff0c;可以说机器学习是统计学在计算机科学和人工智能领域的应用。机器学习和统计学在方法论和技术上有…

科技的成就(四十八)

373、新的编程语言 Swift 2014 年 6 月 2 日&#xff0c;苹果在 WWDC 上发布了新的编程语言 Swift。Swift 由克里斯拉特纳在苹果内部主持开发&#xff0c;历时 4 年。它是一种支持多编程范式的可编译语言&#xff0c;其设计简单、高效、安全&#xff0c;用来开发 macOS/OS X、i…

合宙Air724UG LuatOS-Air script lib API--ftp

Table of Contents ftp ftp.command(command, timeout) ftp.pasv_connect(timeout) (local函数 无法被外部调用) ftp.login(ftp_mode, host, port, username, password, timeout, ssl, cert) ftp.upload(remote_file, local_file, timeout) ftp.download(remote_file, local_fi…

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;常见的有以下几种&#…