JavaScript實現(xiàn)移動小精靈的案例代碼

更新時間：2020年12月12日 11:36:52 作者：辣可樂少加冰

這篇文章主要介紹了JavaScript實現(xiàn)移動小精靈的案例代碼,本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

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

在這里插入圖片描述

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

一、元素偏移量是什么？

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.讀入數(shù)據(jù)

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

代碼如下（示例）：

在這里插入圖片描述

總結

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

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

您可能感興趣的文章:

基于JS實現(xiàn)導航條之調用網(wǎng)頁助手小精靈的方法

利用Ext Js生成動態(tài)樹實例代碼
今天在公司幫同事寫了個用Ext Js生成動態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。
2008-09-09
js和jquery使按鈕失效為不可用狀態(tài)的方法
js和jquery如何使按鈕失效，很簡單，只要設置disabled屬性為true即為不可用狀態(tài)即可，下面有個簡單的示例，大家可以參考下
2014-01-01
js對象實現(xiàn)數(shù)據(jù)分頁效果
這篇文章主要為大家詳細介紹了js對象實現(xiàn)數(shù)據(jù)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
淺聊一下為什么能用RxJS取代Redux
本文我們將和大家淺聊一下為什么能用RxJS取代Redux,RxJS 在現(xiàn)在的前端用比較少,但是 RxJS 作為響應式和函數(shù)式編程的集大成者,似乎被前端開發(fā)者遺忘,可能是學習難度大,可能是有更加方便的解決方案,需要的朋友可以參考下
2024-02-02
input框中的name和id的區(qū)別
這篇文章主要介紹了input框中的name和id的區(qū)別介紹，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2016-11-11
七個基于JavaScript實現(xiàn)的情人節(jié)表白特效
情人節(jié)將至程序員證明自己不是直男的時候到啦我們也有自己的專屬代碼浪漫。本文將介紹七個利用JavaScript實現(xiàn)的情人節(jié)表白特效，需要的可以參考一下
2022-01-01
JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
微信小程序自定義導航欄實例代碼
這篇文章主要給大家介紹了關于微信小程序自定義導航欄的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度
這篇文章主要介紹了使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度的方法，附上實例，推薦給有需要的小伙伴們。
2014-12-12
JS只能輸入正整數(shù)的簡單實例
下面小編就為大家?guī)硪黄狫S只能輸入正整數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10