鼠標樣式和指向

學習抖音: @渡一前端教科頻道

圖上指針跟著鼠標移動,并且改變方向

?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>* {padding: 0;margin: 0;}.arrow {position: fixed;width: 30px;height: 30px;margin-left: -15px;}.arrow img {width: 100%;height: 100%;display: block;}html {cursor: none;}</style>
</head><body><div class="arrow"><img src="./arrow.png" alt=""></div>
</body><script>let arrow = document.querySelector(".arrow")let rad = 0window.onmousemove = (e) => {if (Math.abs(e.movementX) + Math.abs(e.movementY) > 2) {// 計算角度 反正切  這里y是要去負數  因為 這里的Y軸方向是從上到下rad = Math.atan2(e.movementX, -e.movementY)}arrow.style.transform = `translate(${e.clientX}px, ${e.clientY}px) rotate(${rad}rad)`}
</script></html>

?

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/42118.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/42118.shtml
英文地址,請注明出處:http://en.pswp.cn/news/42118.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Spring Clould 消息隊列 - RabbitMQ

視頻地址&#xff1a;微服務&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; 初識MQ-同步通訊的優缺點&#xff08;P61&#xff0c;P62&#xff09; 同步和異步通訊 微服務間通訊有同步和異步兩種方式&#xff1a; 同步通訊&#xff1a;就像打電話&…

數據庫名字添加中文

Jetbrains 可以呀&#xff0c;這個ui 相當棒 from database import Sqlite3Database from googletrans import Translator import csvif __name__ "__main__":TRANS_EN2ZH Falsetranslator Translator()sqlite Sqlite3Database("./drurmu.db")sqlite.r…

x.view(a,b)及x = x.view(x.size(0), -1) 的理解說明

x.view()就是對tensor進行reshape&#xff1a; 我們在創建一個網絡的時候&#xff0c;會在Foward函數內看到view的使用。 首先這里是一個簡單的網絡&#xff0c;有卷積和全連接組成。它的foward函數如下&#xff1a; class NET(nn.Module):def __init__(self,batch_size):sup…

小米交卷大模型,全新小愛同學實測來了

本文源自&#xff1a;量子位 果然只有雷軍和小米&#xff0c;能搶走風口上大模型的熱度。 在雷軍的年度演講分享中&#xff0c;講武大求學經歷&#xff0c;分享學霸4年大學2年完課經驗&#xff1b;講被《硅谷之火》點燃&#xff0c;勤奮練習寫最好的代碼&#xff0c;開啟第一…

armbian使用1panel快速部署部署springBoot項目后端

文章目錄 前言環境準備實現步驟第一步&#xff1a;Armbian安裝1panel第二步&#xff1a;安裝數據庫第三步&#xff1a;查看數據庫容器重要信息【重要】查看容器所在的網絡查看容器連接地址 第四步&#xff1a;項目配置和打包第五步:構建項目鏡像 前言 這里只是簡單記錄部署spr…

一次性解決office部署問題(即點即用等)

前言 因為之前電腦安裝了office2019&#xff0c;后面需要安裝Visio&#xff0c;下載安裝時報錯30204-44,查看發現之前安裝的office版本是即點即用版&#xff0c;可能這兩者不兼容。網上搜索教程等&#xff0c;最后發現一個工具&#xff1a;Office Tool Plus&#xff0c;可以方便…

【水文學法總結】河道內生態流量計算方法(含MATLAB實現代碼)

生態流量&#xff08;Ecological Flow, EF&#xff09; 是指維持河道內生態環境所需要的水流流量。生態流量計算方法眾多&#xff0c;主要分為水文學方法、棲息地模擬法、水力學方法、整體法等&#xff0c;各方法多用于計算維持河道生態平衡的最小生態流量&#xff08;Minimum …

LeetCode 141.環形鏈表

文章目錄 &#x1f4a1;題目分析&#x1f4a1;解題思路&#x1f514;接口源碼&#x1f4a1;深度思考?思考1?思考2 題目鏈接&#x1f449; LeetCode 141.環形鏈表&#x1f448; &#x1f4a1;題目分析 給你一個鏈表的頭節點 head &#xff0c;判斷鏈表中是否有環。 如果鏈表中…

【ES6】—let 聲明方式

一、不屬于頂層對象window let 關鍵字聲明的變量&#xff0c;不會掛載到window的屬性 var a 5 console.log(a) console.log(window.a) // 5 // 5 // 變量a 被掛載到window屬性上了 &#xff0c; a window.alet b 6 console.log(b) console.log(window.b) // 6 // undefin…

原生js獲取今天、昨天、近7天的時間(年月日時分秒)

有的時候我們需要將今天,昨天,近7天的時間(年月日時分秒)作為參數傳遞給后端,如下圖: 那怎么生成這些時間呢?如下代碼里,在methods里的toDay方法、yesterDay方法、weekDay方法分別用于生成今天、昨天和近7天的時間: <template><div class="box"&…

暫停Windows更新的方法,可延后數十萬年,簡單且有手就行

前言 近年來&#xff0c;Windows更新頻率過快&#xff0c;最大只能暫停更新5周&#xff0c;導致用戶不厭其煩&#xff0c;從網上找到的暫停更新的方法不是過于繁瑣就是毫無效果&#xff0c;或者是暫停的時間有限&#xff0c;無意中發現一個大神的帖子可以通過修改注冊表信息以達…

Java定時任務方案

一、Timer import java.util.Timer; import java.util.TimerTask;public class TimerExample {public static void main(String[] args) {Timer timer new Timer();TimerTask task new TimerTask() {Overridepublic void run() {System.out.println("Task executed at:…

uni-app自定義多環境配置,動態修改appid

背景 在企業級項目開發中&#xff0c;一般都會分為開發、測試、預發布、生產等多個環境&#xff0c;在工程化中使用不同的打包命令改變環境變量解決不同環境各種變量需要手動修改的問題&#xff0c;比如接口請求地址&#xff0c;不同環境的請求路徑前綴都是不同的。在使用uni-…

Docker中為RabbitMQ安裝rabbitmq_delayed_message_exchange延遲隊列插件

1、前言 rabbitmq_delayed_message_exchange是一款向RabbitMQ添加延遲消息傳遞&#xff08;或計劃消息傳遞&#xff09;的插件。 插件下載地址&#xff1a;https://www.rabbitmq.com/community-plugins.html 1、下載插件 首先需要確定我們當前使用的RabbitMQ的版本&#xff0c…

Android隱藏輸入法

1、方法一(如果輸入法在窗口上已經顯示&#xff0c;則隱藏&#xff0c;反之則顯示) InputMethodManager imm (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); 2、方法二(view為接受軟…

實踐教程|基于 pytorch 實現模型剪枝

PyTorch剪枝方法詳解&#xff0c;附詳細代碼。 一&#xff0c;剪枝分類 1.1&#xff0c;非結構化剪枝 1.2&#xff0c;結構化剪枝 1.3&#xff0c;本地與全局修剪 二&#xff0c;PyTorch 的剪枝 2.1&#xff0c;pytorch 剪枝工作原理 2.2&#xff0c;局部剪枝 2.3&#…

前端如何安全的渲染HTML字符串?

在現代的Web 應用中&#xff0c;動態生成和渲染 HTML 字符串是很常見的需求。然而&#xff0c;不正確地渲染HTML字符串可能會導致安全漏洞&#xff0c;例如跨站腳本攻擊&#xff08;XSS&#xff09;。為了確保應用的安全性&#xff0c;我們需要采取一些措施來在安全的環境下渲染…

QString常用函數介紹

此篇博客核心介紹QT中的QString類型的常用函數&#xff0c;介紹到的函數均從幫助手冊或其他博客中看到 QString 字符串類 Header: #include qmake: QT core 一、QString字符串轉換 1、QString類字符串轉換為整數 int toInt(bool *ok Q_NULLPTR, int base 10) cons…

Python 基礎 -- Tutorial(二)

5、數據結構 本章更詳細地描述了一些你已經學過的東西&#xff0c;并添加了一些新的東西。 5.1. 更多關于Lists 列表(list)數據類型有更多的方法。下面是列表對象的所有方法: list.append(x) 在列表末尾添加一項。相當于a[len(a):] [x]。 list.extend(iterable) 通過添加可…