JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼
提示:今天學(xué)習(xí)了一個(gè)js的小案例,來和可樂一起學(xué)習(xí)探討下吧 skr~效果:

提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、元素偏移量是什么?offset :中文就是偏離的意思, 使用 offset系列相關(guān)屬性可以動(dòng)態(tài)的得到該元素的位置(偏移)、大小等。
案例中使用到的屬性:offsetLeft offseLtTopoffsetleft :返回元素距離父元素左側(cè)的距離offsetTop:返回元素距離父元素上方的距離 二、使用步驟1.想方設(shè)法:先獲取到坐標(biāo) 鼠標(biāo)點(diǎn)擊獲取盒子中的位置,出現(xiàn)坐標(biāo)?
代碼如下(示例):
<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)建點(diǎn)擊的事件監(jiān)聽事件2、通過event 獲取 頁面上的坐標(biāo)(pageX,pageY)3、怎么獲得? 使用pageX-盒子的offsetLeft獲得x軸使用pageY-盒子的offsetTop獲得y軸
2.讀入數(shù)據(jù)
在獲得坐標(biāo)的基礎(chǔ)上 實(shí)現(xiàn)盒子移動(dòng)
代碼如下(示例):

提示:這里對(duì)文章進(jìn)行總結(jié):例如:以上就是今天的內(nèi)容la,本文僅僅簡(jiǎn)單介紹了元素偏移的使用,元素偏移提供了大量能使我們快速便捷地處理數(shù)據(jù)的方法。謝謝支持
到此這篇關(guān)于JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼的文章就介紹到這了,更多相關(guān)js 移動(dòng)小精靈內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 理解PHP5中static和const關(guān)鍵字2. Android table布局開發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器3. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼4. IntelliJ IDEA安裝插件的方法步驟5. php模擬實(shí)現(xiàn)斗地主發(fā)牌6. vue 使用localstorage實(shí)現(xiàn)面包屑的操作7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. Python random庫使用方法及異常處理方案9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vuex localStorage的具體使用

網(wǎng)公網(wǎng)安備