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

news2024/11/27 7:41:32


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.coloradmin.cn/o/793887.html

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

相关文章

Java并发(十三)----共享存在的问题

1、小故事 老王&#xff08;操作系统&#xff09;有一个功能强大的算盘&#xff08;CPU&#xff09;&#xff0c;现在想把它租出去&#xff0c;赚一点外快 小南、小女&#xff08;不同的线程&#xff09;来使用这个算盘来进行一些计算&#xff0c;并按照时间给老王支付费用…

多元函数习题

目录 例题1&#xff1a; 例题2&#xff1a; 例题3&#xff1a; 证明题 例1&#xff1a; 例题2 ​编辑 例题3&#xff1a; 例题4&#xff1a; 例题1&#xff1a; 第二问的解法2&#xff1a; 例题2&#xff1a; 选择D&#xff0c;偏导数存在与函数连续并没有关系。 例题3&…

Git竞合处理

Gitee新建一个代码仓库&#xff0c;clone到本地&#xff0c;模拟竞合的情况出现 这里仓库已经配好了ssh&#xff0c;所以没有添加账户绑定的步骤 clone到本地 模拟A同学Clone代码 git clone 项目地址新建一个文件&#xff0c;上传到仓库 push到仓库 代码仓库已经可以看到了…

mysql-速成补充

目录 1.演示事务 ​编辑 1.1 read-uncommitted 1.2 read-committed 1.3 repeatable read 1.4 幻读 1.5 serializable 1.6 savepoint 2 变量 2.1 语法 2.2 举例 3 存储过程和函数 3.1 特点和语法 3.2 举例 4.函数 4.1 语法 4.2 举例 5 流程控制 5.1 分…

window.location.protocol使用实战图片不同浏览器显示问题解决方案

图片在不同浏览器可能会显示不出来个别原因分析&#xff0c; 如火狐浏览器协议类型会有问题 但是谷歌可以 解决方案&#xff1a;将写死的协议 如http换成window.location.protocol就可以了 前景&#xff1a;前台项目和后台项目有时返回的并不是图片全路径 &#xff0c;有时候…

接口测试进阶之数据模板

大家好久不见了。今天的文章将介绍jinja2模板在接口测试数据上的应用。 这几个月我在想&#xff0c;进阶系列要怎么写。 毕竟很多情况下&#xff0c;我觉得写技术文章和做培训一样&#xff0c;都会有两个结果&#xff1a; 1.是需要这些知识的人看不懂。 2.是看得懂的人不需要…

数值线性代数: 共轭梯度法

本文记录共轭梯度噶求解线性方程组的原理及流程。 零、预修 0.1 LU分解 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在下三角矩阵和上三角矩阵&#xff0c;使得。 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在唯一的下三角矩阵和上三角矩阵&#xff…

【云原生】Docker私有仓库registry

目录 1&#xff09;用docker容器运行registry私有仓库服务。 2&#xff09;运行私有仓库服务 3&#xff09;镜像重命名(要上传的镜像名需要注明私仓的ip) 4&#xff09;编辑docker配置文件(因为默认是拉取docker官方的镜像&#xff0c;需要重新指定) 5&#xff09;其他dock…

walkRE裁剪面域内部--制作面洞

1、打开WalkRE软件&#xff0c;根据模板新建工程&#xff0c;如下&#xff1a; 2、绘制待裁剪区域和裁剪区域。如下&#xff1a; 将中间的矩形转换成面状的&#xff0c;如下&#xff1a; 3、裁剪掉中间内部的矩形&#xff0c;保留中间面状矩形的外部&#xff0c;如下&#xff1…

【算法提高:动态规划】1.2 最长上升子序列模型(TODO:最长公共上升子序列)

文章目录 题目列表1017. 怪盗基德的滑翔翼1014. 登山482. 合唱队形1012. 友好城市&#xff08;⭐排序后 最长上升子序列模型&#xff09;1016. 最大上升子序列和1010. 拦截导弹解法1——最长递减子序列 贪心解法2——最长递减子序列 最长递增子序列&#xff08;⭐贪心结论&am…

2023年你不容错过的软件测试项目实战(APP项目实战)免费版

前言 最近很多的人都在问我有没有什么项目可以用来练手&#xff0c;正好我这里有一个比较适合练手的项目&#xff0c;那就给大家安利一下吧&#xff0c;废话就不多说了。 项目名称&#xff1a; APP项目实战 项目说明&#xff1a; 本项目里面包括了功能测试、性能测试、安全…

MATLAB与ROS联合仿真——实例程序搭建思路

一、基础运动控制实例程序搭建思路 1、需要完成的任务&#xff1a; &#xff08;1&#xff09;通过设定小车运动的速度及转角来控制ROS中小车运动。 &#xff08;2&#xff09;通过键盘输入指令控制ROS中小车运动&#xff0c;键盘输入w小车前行&#xff0c;s小车后退&#x…

[golang gin框架] 42.Gin商城项目-微服务实战之后台Rbac微服务角色增删改查微服务

一.重构后台Rbac用户登录微服务功能 上一节讲解了后台Rbac微服务用户登录功能以及Gorm数据库配置单独抽离&#xff0c;Consul配置单独抽离&#xff0c;这一节讲解后台Rbac微服务角色增删改查微服务功能&#xff0c;Rbac微服务角色增删改查微服务和后台Rbac用户登录微服务是属于…

Vue--Vuex

一、Vuex 概述 1.是什么 Vuex 是一个 Vue 的 状态管理工具&#xff0c;状态就是数据。 大白话&#xff1a;Vuex 是一个插件&#xff0c;可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如&#xff1a;购物车数据 个人信息数 2.使用场景 某个状态 在 很多个组件 来使…

leetCode刷题记录3-面试经典150题

文章目录 不要摆&#xff0c;没事干就刷题&#xff0c;只有好处&#xff0c;没有坏处&#xff0c;实在不行&#xff0c;看看竞赛题面试经典 150 题80. 删除有序数组中的重复项 II189. 轮转数组122. 买卖股票的最佳时机 II 不要摆&#xff0c;没事干就刷题&#xff0c;只有好处&…

169. 多数元素

题目 题解一&#xff1a;map集合计数 /*** map集合计数* param nums* return*/public static int majorityElement(int[] nums) {Map<Integer, Integer> map new HashMap<>();//第一个for循环将数组中的元素作为key 出现次数作为value存入map 并且key重复 就v…

代码随想录算法学习心得 48 | 583.两个字符串的删除操作、72.编辑距离...

一、两个字符串的删除操作 链接&#xff1a;力扣 描述&#xff1a;给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 思路如下&#xff1a;整体思路是不变的。 这次是两个字符串可以相互…

OceanMind海睿思助力南京钢铁基于数字化审计为核心的全域风控管理

近日&#xff0c;中新赛克海睿思 与 南京钢铁股份有限公司&#xff08;以下简称“南钢”&#xff09;达成深度战略合作&#xff0c;携手推进企业内审数字化迈向智慧化发展。 双方将依托 OceanMind海睿思 提供业内领先的大数据平台和丰富的审计行业经验&#xff0c;积极利用先进…

《向量数据库指南》:向量数据库Pinecone备份索引教程

目录 ⚠️警告 使用集合创建备份 检查集合的状态 列出您的集合 删除一个集合 本文档描述如何使用集合备份索引。 要了解如何从集合创建索引,请参阅管理索引。 ⚠️警告 本文档使用集合。这是一个公开预览功能。在使用此功能生产负载之前,请进行充分测试。 使用集合…

一种有趣的 OTA 升级思路(基于 LoRa 通信的 OTA 固件升级的调试记录)

文章目录 1 概述2 调试之路2.1 想法2.2 函数和变量定义在绝对地址的实现2.2.1 IAR的扩展关键字2.2.2 函数的绝对定位2.2.3 变量的绝对定位2.2.4 常量的绝对定位2.2.4 .c文件的绝对定位 2.3 Bootload 共有函数的实现2.4 APP 共有函数的使用 3 注意事项4 调试坎坷之路5 补充 1 概…