Hexo修改鼠标样式

• 在 Blogroot/source/js文件夹下新建 cursor.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='1.5' fill='rgb(57, 197, 187)'/></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()  
})();

• 在 Blogroot/source/css/custom.css添加代码如下

/* 鼠标样式 */  
#cursor {  
  position: fixed;  
  width: 16px;  
  height: 16px;  
  /* 这里改变跟随的底色 */  
  background: rgb(219, 86, 246); 
  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);  
}

• 在主题配置文件 _config.anzhiyu.yml的 inject配置项中引入刚才创建的文件

inject:   
  head:   
    - <link rel="stylesheet" href="/css/custom.css">  
  bottom:  
    - <script defer src="/js/cursor.js"></script>

• 执行 hexo三连即可

hexo clean && hexo g && hexo s