From 4ac0cfc1d42f777d961bb17367d353bd3fa0d817 Mon Sep 17 00:00:00 2001 From: XXR <2811082564@qq.com> Date: Mon, 18 Dec 2023 20:32:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E4=BE=8B?= =?UTF-8?q?=EF=BC=8C=E5=92=8C=E6=A0=87=E9=A2=98=E6=A0=8F=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 9 ++++++--- src/views/Echarts.vue | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index ed1f195..4424d97 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@
新冠疫情时空传播过程可视化模拟 - 数据来源:{{ uploadName == "" ? "无" : uploadName }} @@ -17,7 +17,10 @@ :before-upload="beforeUpload" :show-file-list="false" > - 上传区域 + + 上传区域 + Date: Mon, 18 Dec 2023 21:34:37 +0800 Subject: [PATCH 2/2] cursor --- src/cursor/cursor.js | 92 +++++++++++++++++++++++++++++++++++++++++++ src/cursor/custom.css | 44 +++++++++++++++++++++ src/main.js | 3 ++ 3 files changed, 139 insertions(+) create mode 100644 src/cursor/cursor.js create mode 100644 src/cursor/custom.css diff --git a/src/cursor/cursor.js b/src/cursor/cursor.js new file mode 100644 index 0000000..b72e7d4 --- /dev/null +++ b/src/cursor/cursor.js @@ -0,0 +1,92 @@ + +//定义了一个名为CURSOR的全局变量，用于存储Cursor类的实例化对象。 +var CURSOR; + +//定义了一个Math.lerp函数，用于执行线性插值计算，返回两个数值间的插值结果。 +Math.lerp = (a, b, n) => (1 - n) * a + n * b; + +//定义了一个getStyle函数，用于获取指定元素的指定样式属性的值，并处理了兼容性。 +const getStyle = (el, attr) => { + try { + return window.getComputedStyle + ? window.getComputedStyle(el)[attr] + : el.currentStyle[attr]; + } catch (e) {} + return ""; +}; + +//定义了一个Cursor类，该类包含了鼠标指针的位置信息、 +//光标的样式等属性和方法。在构造函数中，初始化了鼠标指针并绑定了事件监听。 +class Cursor { + constructor() { + this.pos = {curr: null, prev: null}; + this.pt = []; + this.create(); + this.init(); + this.render(); + } + +//move方法用于移动光标的位置。 + move(left, top) { + this.cursor.style["left"] = `${left}px`; + this.cursor.style["top"] = `${top}px`; + } + +//create方法用于创建鼠标指针和获取指定元素中鼠标指针样式为"pointer"的元素的外部内容 + 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,") 4 4, auto}`; + } +//refresh方法用于刷新鼠标指针状态，并重新生成光标和初始化事件监听。 + 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方法用于初始化事件监听，包括鼠标移动、悬停、离开等操作。 + 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方法用于渲染光标的动态效果，通过不断触发requestAnimationFrame来实现光标位置的平滑过渡。 + 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类，并在需要重新获取列表时调用CURSOR.refresh()方法。 +(() => { + CURSOR = new Cursor(); + // 需要重新获取列表时，使用 CURSOR.refresh() +})(); \ No newline at end of file diff --git a/src/cursor/custom.css b/src/cursor/custom.css new file mode 100644 index 0000000..782738b --- /dev/null +++ b/src/cursor/custom.css @@ -0,0 +1,44 @@ +/* 鼠标样式 */ +/*#cursor：这是鼠标指针的样式定义，包括固定定位、宽高为16像素、圆角边框为8像素、 +背景颜色为rgb(37, 137, 174)等属性，指定了transition动画过渡效果和pointer-events为none， +表示不响应鼠标事件。*/ +#cursor { + position: fixed; + width: 16px; + height: 16px; + /* 这里改变跟随的底色 */ + background: rgb(37, 137, 174); + border-radius: 8px; + opacity: 0.25; + z-index: 10086; + pointer-events: none; + transition: 0.2s ease-in-out; + transition-property: background-color, opacity, transform; + } + +/*当鼠标指针被隐藏时，通过修改opacity属性将其透明度设置为0，实现隐藏的效果。*/ + #cursor.hidden { + opacity: 0; + } + + /*#cursor.hover：当鼠标指针悬停在特定元素上时，修改鼠标指针的样式， + 将其透明度降低，同时放大2.5倍，实现悬停效果。*/ + #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：当鼠标按下时，修改鼠标指针的样式， +将其透明度降低，同时缩小为原来的一半，实现按下效果。*/ + #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); + } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 4827a16..7a7016d 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,9 @@ import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import Toast from "./components/Toast/index"; import VueRouter from 'vue-router'; +import './cursor/cursor.js'; +import './cursor/custom.css'; // 在这里引入自定义的CSS文件 + Vue.use(Toast); Vue.use(ElementUI) -- Gitee