欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)

 更新時(shí)間:2021年05月30日 10:20:51   作者:JackieDYH  
在頁(yè)面開(kāi)發(fā)時(shí)我們少不了各種鼠標(biāo)交互動(dòng)作,那么JavaScript中如何實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng),本文就詳細(xì)的介紹一下,感興趣的可以了解一下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

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

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

    這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • 基于JavaScript實(shí)現(xiàn)全選、不選和反選效果

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

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)全選、不選和反選效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml...
    2007-01-01
  • VC調(diào)用javascript的幾種方法(推薦)

    VC調(diào)用javascript的幾種方法(推薦)

    下面小編就為大家?guī)?lái)一篇VC調(diào)用javascript的幾種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-08
  • 微信小程序?qū)崿F(xiàn)樹(shù)莓派(raspberry pi)小車(chē)控制

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

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)樹(shù)莓派(raspberry pi)小車(chē)控制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • 最新評(píng)論