修改鼠标样式 #7
This commit is contained in:
parent
cdf644caba
commit
1eab49d8bb
@ -1,26 +0,0 @@
|
|||||||
#cursor {
|
|
||||||
position: fixed;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background: #ffffffcc;
|
|
||||||
border-radius: 8px;
|
|
||||||
opacity: 0.25;
|
|
||||||
z-index: 99999999;
|
|
||||||
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(1.2); */
|
|
||||||
}
|
|
||||||
|
|
||||||
#cursor.active {
|
|
||||||
opacity: 0.5;
|
|
||||||
transform: scale(0.5);
|
|
||||||
}
|
|
@ -34,6 +34,7 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@ -44,6 +45,7 @@ p {
|
|||||||
color: #efefef;
|
color: #efefef;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-family: 'MiSans', sans-serif;
|
font-family: 'MiSans', sans-serif;
|
||||||
|
cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -72,6 +74,24 @@ a:hover {
|
|||||||
margin: 14px 0px;
|
margin: 14px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*鼠标样式*/
|
||||||
|
#g-pointer-1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#g-pointer-2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transition: 0.05s linear;
|
||||||
|
pointer-events: none;
|
||||||
|
background: #ffffff40;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 9999999;
|
||||||
|
}
|
||||||
|
|
||||||
/*背景*/
|
/*背景*/
|
||||||
.bg-all {
|
.bg-all {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
@ -28,7 +28,6 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="./css/mobile.css">
|
<link rel="stylesheet" type="text/css" href="./css/mobile.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/loading.css">
|
<link rel="stylesheet" type="text/css" href="./css/loading.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/animation.css">
|
<link rel="stylesheet" type="text/css" href="./css/animation.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/cursor.css">
|
|
||||||
<link rel="icon" href="./favicon.ico">
|
<link rel="icon" href="./favicon.ico">
|
||||||
<link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
|
||||||
<!-- Izitoast -->
|
<!-- Izitoast -->
|
||||||
@ -78,7 +77,10 @@
|
|||||||
<img id="bg" onerror="this.classList.add('error');"></img>
|
<img id="bg" onerror="this.classList.add('error');"></img>
|
||||||
<div class="cover"></div>
|
<div class="cover"></div>
|
||||||
</div>
|
</div>
|
||||||
<!--主体内容-->
|
<!-- 鼠标指针 -->
|
||||||
|
<div id="g-pointer-1"></div>
|
||||||
|
<div id="g-pointer-2"></div>
|
||||||
|
<!-- 主体内容 -->
|
||||||
<main id="main" class="main">
|
<main id="main" class="main">
|
||||||
<div class="container" id="container">
|
<div class="container" id="container">
|
||||||
<div class="row" id="row">
|
<div class="row" id="row">
|
||||||
@ -368,7 +370,7 @@
|
|||||||
<div class="img-title">
|
<div class="img-title">
|
||||||
<span class="img-title-big" id="logo-title-other">imsyy</span>
|
<span class="img-title-big" id="logo-title-other">imsyy</span>
|
||||||
<span class="img-text" id="logo-title-other-small">.top</span><br />
|
<span class="img-text" id="logo-title-other-small">.top</span><br />
|
||||||
<span class="img-text"> v 3.0</span>
|
<span class="img-text"> v 3.2</span>
|
||||||
<a href="https://github.com/imsyy/home" target="_blank">
|
<a href="https://github.com/imsyy/home" target="_blank">
|
||||||
<i class="fa-brands fa-github"></i>
|
<i class="fa-brands fa-github"></i>
|
||||||
</a>
|
</a>
|
||||||
@ -492,7 +494,6 @@
|
|||||||
<script type="text/javascript" src="./js/set.js"></script>
|
<script type="text/javascript" src="./js/set.js"></script>
|
||||||
<script type="text/javascript" src="./js/time.js"></script>
|
<script type="text/javascript" src="./js/time.js"></script>
|
||||||
<script type="text/javascript" src="./js/js.cookie.js"></script>
|
<script type="text/javascript" src="./js/js.cookie.js"></script>
|
||||||
<script type="text/javascript" src="./js/cursor.js"></script>
|
|
||||||
<script type="text/javascript"
|
<script type="text/javascript"
|
||||||
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
|
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
|
||||||
</script>
|
</script>
|
||||||
|
95
js/cursor.js
95
js/cursor.js
@ -1,95 +0,0 @@
|
|||||||
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")));
|
|
||||||
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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.45);
|
|
||||||
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.45);
|
|
||||||
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()
|
|
||||||
})();
|
|
17
js/main.js
17
js/main.js
@ -23,6 +23,23 @@ iziToast.settings({
|
|||||||
iconColor: '#efefef',
|
iconColor: '#efefef',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* 鼠标样式 */
|
||||||
|
const body = document.querySelector("body");
|
||||||
|
const element = document.getElementById("g-pointer-1");
|
||||||
|
const element2 = document.getElementById("g-pointer-2");
|
||||||
|
const halfAlementWidth = element.offsetWidth / 2;
|
||||||
|
const halfAlementWidth2 = element2.offsetWidth / 2;
|
||||||
|
|
||||||
|
function setPosition(x, y) {
|
||||||
|
element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.addEventListener('mousemove', (e) => {
|
||||||
|
window.requestAnimationFrame(function () {
|
||||||
|
setPosition(e.clientX, e.clientY);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
//加载完成后执行
|
//加载完成后执行
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user