JavaScript實現(xiàn)移動小精靈的案例代碼
更新時間：2020年12月12日 11:36:52 作者：辣可樂少加冰
這篇文章主要介紹了JavaScript實現(xiàn)移動小精靈的案例代碼,本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
提示：
今天學習了一個js的小案例，來和可樂一起學習探討下吧 skr~
效果：
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、元素偏移量是什么？
offset ：中文就是偏離的意思， 使用 offset系列相關(guān)屬性可以動態(tài)的得到該元素的位置（偏移）、大小等。
案例中使用到的屬性：offsetLeft offseLtTopoffsetleft ：返回元素距離父元素左側(cè)的距離offsetTop：返回元素距離父元素上方的距離
二、使用步驟
1.想方設(shè)法：先獲取到坐標 鼠標點擊獲取盒子中的位置，出現(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.讀入數(shù)據(jù)
在獲得坐標的基礎(chǔ)上 實現(xiàn)盒子移動
代碼如下（示例）：
總結(jié)
提示：這里對文章進行總結(jié)：
例如：以上就是今天的內(nèi)容la，本文僅僅簡單介紹了元素偏移的使用，元素偏移提供了大量能使我們快速便捷地處理數(shù)據(jù)的方法。謝謝支持
到此這篇關(guān)于JavaScript實現(xiàn)移動小精靈的案例代碼的文章就介紹到這了,更多相關(guān)js 移動小精靈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
今天在公司幫同事寫了個用Ext Js生成動態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。2008-09-09
js和jquery如何使按鈕失效，很簡單，只要設(shè)置disabled屬性為true即為不可用狀態(tài)即可，下面有個簡單的示例，大家可以參考下2014-01-01
這篇文章主要為大家詳細介紹了js對象實現(xiàn)數(shù)據(jù)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文我們將和大家淺聊一下為什么能用RxJS取代Redux,RxJS 在現(xiàn)在的前端用比較少,但是 RxJS 作為響應(yīng)式和函數(shù)式編程的集大成者,似乎被前端開發(fā)者遺忘,可能是學習難度大,可能是有更加方便的解決方案,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了input框中的name和id的區(qū)別介紹，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-11-11
七個基于JavaScript實現(xiàn)的情人節(jié)表白特效
情人節(jié)將至 程序員證明自己不是直男的時候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個利用JavaScript實現(xiàn)的情人節(jié)表白特效，需要的可以參考一下2022-01-01
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導航欄的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度
這篇文章主要介紹了使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度的方法，附上實例，推薦給有需要的小伙伴們。2014-12-12
下面小編就為大家?guī)硪黄狫S只能輸入正整數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10