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

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

 更新時間：2020年12月12日 11:36:52   作者：辣可樂少加冰  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動小精靈的案例代碼,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

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

在這里插入圖片描述

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

一、元素偏移量是什么？

 offset ：中文就是偏離的意思， 使用 offset系列相關(guān)屬性可以動態(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)盒子移動

代碼如下（示例）：

在這里插入圖片描述

總結(jié)

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

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

相關(guān)文章

最新評論