JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
offset
offset 即偏移量,使用 offset 系列相關(guān)屬性可以 動(dòng)態(tài)的 獲取該元素的位置(偏移)、大小等,如:
元素距離帶有定位父元素的位置
獲取元素自身的大小(寬度高度)
注:返回的數(shù)值不帶單位
offset 系列常用的屬性包括:
element.offsetParent
返回作為該元素帶有定位的父級(jí)元素,如果父級(jí)元素沒(méi)有定位,則返回 body
注意,parentNode 和 offsetParent 還是有本質(zhì)上的區(qū)別的:parentNode 返回的是直接父級(jí)元素,offsetParent 返回的是帶有定位的父級(jí)元素。
element.offsetTop
返回元素帶有定位父元素上方的偏移
element.offsetLeft
返回元素帶有定位父元素左邊框的偏移
element.offsetWidth
返回自身包括 padding, 邊框, 內(nèi)容區(qū)的寬度,返回?cái)?shù)值不帶單位
element.offsetHeight
返回自身包括 padding, 邊框, 內(nèi)容區(qū)的高度,返回?cái)?shù)值不帶單位
offset 和 style 的區(qū)別
offset | style |
---|---|
offset 可以得到任意樣式表中的樣式值 | style 只能得到行內(nèi)樣式表中的樣式值,無(wú)法獲得內(nèi)嵌樣式 |
offset 系列獲得的數(shù)值是沒(méi)有單位的 | style.width 獲得的是帶有單位的字符串 |
offsetWidth 包含 padding+border+width | style.width 獲得不包含 padding 和 border 的值 |
offsetWidth 等屬性是只讀屬性,只能獲取不能賦值 | style 屬性是可讀寫(xiě)屬性,style.width 可以獲取也可以賦值 |
只想要獲取元素大小位置的時(shí)候,用 offset 更合適 | 要對(duì)元素樣式進(jìn)行修改的話(huà),使用 style 更合適 |
案例一:實(shí)時(shí)展示鼠標(biāo)的坐標(biāo)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>鼠標(biāo)位置獲取-01</title> <style> .box { width: 500px; height: 500px; background-color: #55aaff; margin-left: 50px; } </style> </head> <body> <p>獲取鼠標(biāo)在盒子內(nèi)坐標(biāo)</p> <div class="box"></div> <script> // 在盒子中點(diǎn)擊,想要獲得鼠標(biāo)距離盒子左右的距離 // 實(shí)現(xiàn): // 1. 獲得鼠標(biāo)在頁(yè)面中的坐標(biāo),e.pageX, e.pageY // 2. 獲得盒子到頁(yè)面中的距離, box.offsetLeft, box.offsetTop // 3. 兩者相減就能夠獲得鼠標(biāo)在盒子中的坐標(biāo) // 下面看實(shí)現(xiàn)過(guò)程吧! const box = document.querySelector(".box"); box.addEventListener("mousemove", function(e) { // console.log(e.pageX, e.pageY); // console.log(box.offsetLeft, box.offsetTop); const x = e.pageX - this.offsetLeft; const y = e.pageY - this.offsetTop; box.textContent = `x: ${x}, y: ${y}`; }); </script> </body> </html>
案例二:拖動(dòng)模塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>模塊拖動(dòng)-02</title> <style> * { margin: 0; padding: 0; } .login, .modal { display: none; } .login { width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background-color: #fff; box-shadow: 0 0 20px #ddd; z-index: 999; transform: translate(-50%, -50%); text-align: center; } .modal { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 998; } .login-content { margin: 100px auto; text-align: center; } .login-content h3:hover, .closeBtn:hover { cursor: pointer; } .closeBtn { position: absolute; right: 10px; top: 10px; } .login h4 { margin-top: 10px; } .login h4:hover { cursor: move; } </style> </head> <body> <div class="login-content"> <h3 id="openLogin">點(diǎn)擊彈出模擬框</h3> </div> <div class="login"> <div class="closeBtn" id="closeBtn">關(guān)閉</div> <h4 class="loginHeader">點(diǎn)擊我拖動(dòng)吧</h4> </div> <div class="modal"></div> <script> // 獲取元素 const login = document.querySelector(".login"); const modal = document.querySelector(".modal"); const closeBtn = document.querySelector("#closeBtn"); const openLogin = document.querySelector("#openLogin"); // 點(diǎn)擊顯示元素 openLogin.addEventListener("click", () => { modal.style.display = "block"; login.style.display = "block"; }); closeBtn.addEventListener("click", () => { modal.style.display = "none"; login.style.display = "none"; }); // 實(shí)現(xiàn)拖拽移動(dòng)功能 // 1. 鼠標(biāo)按下獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo) const loginHeader = document.querySelector(".loginHeader"); loginHeader.addEventListener("mousedown", function (e) { const x = e.pageX - login.offsetLeft; const y = e.pageY - login.offsetTop; const move = function (e) { login.style.left = `${e.pageX - x}px`; login.style.top = `${e.pageY - y}px`; }; // 2. 移動(dòng)鼠標(biāo) document.addEventListener("mousemove", move); document.addEventListener("mouseup", function () { document.removeEventListener("mousemove", move); }); }); </script> </body> </html>
到此這篇關(guān)于JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)的文章就介紹到這了,更多相關(guān)JavaScript鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
- 如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
- JavaScript使用canvas繪制坐標(biāo)和線(xiàn)
- JavaScript 空間坐標(biāo)的使用
- JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
- js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
- JS圖形編輯器場(chǎng)景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換
相關(guān)文章
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖),需要的朋友可以參考下2019-09-09JavaScript原生實(shí)現(xiàn)觀察者模式的示例
下面小編就為大家分享一篇JavaScript原生實(shí)現(xiàn)觀察者模式的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例
今天小編就為大家分享一篇layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09

微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能

基于JavaScript實(shí)現(xiàn)全選、不選和反選效果

微信小程序?qū)崿F(xiàn)樹(shù)莓派(raspberry pi)小車(chē)控制