前言

提示：今天學習了一個js的小案例，來和可樂一起學習探討下吧 skr~效果：

提示：以下是本篇文章正文內容，下面案例可供參考

一、元素偏移量是什么？

offset ：中文就是偏離的意思， 使用 offset系列相關屬性可以動態(tài)的得到該元素的位置（偏移）、大小等。

案例中使用到的屬性：offsetLeft offseLtTopoffsetleft ：返回元素距離父元素左側的距離offsetTop：返回元素距離父元素上方的距離 二、使用步驟

1.想方設法：先獲取到坐標 鼠標點擊獲取盒子中的位置，出現(xiàn)坐標？

代碼如下（示例）：

<script> <div class='box'></div> document.querySelector(’.box’).addEventListener(’click’,function(event){ var x = event.pageX var y = event.pageY var left = this.offsetLeft var top = this.offsetTop console.log(x-left,y-top) }) </script>

注：

1、獲取盒子 給盒子創(chuàng)建點擊的事件監(jiān)聽事件2、通過event 獲取 頁面上的坐標（pageX,pageY）3、怎么獲得？ 使用pageX-盒子的offsetLeft獲得x軸使用pageY-盒子的offsetTop獲得y軸

2.讀入數據

在獲得坐標的基礎上 實現(xiàn)盒子移動

代碼如下（示例）：

總結

提示：這里對文章進行總結：例如：以上就是今天的內容la，本文僅僅簡單介紹了元素偏移的使用，元素偏移提供了大量能使我們快速便捷地處理數據的方法。謝謝支持

到此這篇關于JavaScript實現(xiàn)移動小精靈的案例代碼的文章就介紹到這了,更多相關js 移動小精靈內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！