js中之面積覆蓋

2021-09-26 07:08:23 字數 1054 閱讀 9060

js中之面積覆蓋

將乙個物塊拖入另乙個物塊中,將另外乙個物塊覆蓋這就是面積覆蓋。我們可以通過這個去實現音量的控制等效果。那麼要是實現這個功能要怎麼做呢,毫無疑問首先需要的就是物體拖拽,然後剩下的就是計算覆蓋的面積。首先就是我們來對其進行頁面的乙個布局。我們需要兩個物塊,乙個是需要進行拖拽的物體乙個是需要覆蓋的物體。html中的布局,**如下:

接下來就是對這兩個div進行樣式上的布局,接下來就是樣式上的布局的**如下:

那麼接下來就是整個邏輯的實現過程,在之前我寫的部落格中寫了有關於拖拽的實現,具體可以去看之前的部落格,當明白上一部分之後再來理解接下來的內容更加的容易這個就是之前的部落格內容。那麼接下來就是說面積覆蓋這個問題。先將**展示,再對其進行說明。

面積覆蓋中down與up事件與拖拽過程中沒有任何的區別,所要展示覆蓋這個功能基本上都是在move事件上進行邏輯上的實現。在這個bindevent方法中傳入了三個引數,新增加的引數就是需要去覆蓋的部分的dom節點。這部分的邏輯實現主要就是在數學方法上的內容,在這裡我們將div設定的為乙個正方體,其他形狀的實現過程也是如此。當拖拽的物體進入需要覆蓋的目標區域時,需要分兩種情況來對覆蓋面積進行計算,第一種覆蓋的寬度從右往左移動時覆蓋長度逐漸增大與逐漸減小時。在逐漸增大時長度的計算的判定條件是移動物塊的左邊距一直小於目標物塊的左邊距,移動物塊的右邊距始終小於目標物塊的右邊距,此時的覆蓋長度是逐漸增加的,其覆蓋的長度等於目標物塊的左邊距加上目標物塊的寬度減去移動物塊的左邊距。逐漸減小時判定的條件就是移動物塊的左邊距大於目標物塊的左邊距,移動物塊的右邊距始終大於目標物塊的右邊距,其計算覆蓋的長度為移動物塊的左邊距加上其寬度減去目標物塊的左邊距。同樣高度的計算方式也是這樣,其原理相同。最後將這兩部分相乘除以目標物塊的面積,就可以實時的實現覆蓋面積的計算。說到這裡,覆蓋面積的功能就實現了。

JS之物件導向

一,面對物件初始 為什麼要學習物件 1,js獲取頁面元素,操作頁面元素內容與樣式,資料面對物件思想讓運算元更加便捷與容易 優點 1,拓展性強,2,減少 冗餘3,降低成本 二,物件屬性解決迴圈繫結變數汙染問題 1,物件的 臨時 屬性可以幫助臨時資料的儲存,因為臨時資料的生命週期往往很短,需要提示臨時資...

js 之物件導向

物件 是什麼?物件就是乙個整體,對外提供一些操作,比如 電視機 不用知道內部的構造,只知道怎麼用 物件導向 是什麼?使用物件時,只關注物件提供的功能,不關心內部細節,比如 操作電視機 只知道用遙控器控制 js的物件導向 特點 1.抽象 抓住問題的核心 2.封裝 不考慮內部細節,只考慮外部使用 3.繼...

覆蓋的面積 HDU 1255 面積的交

1.cnt 1 說明該區間被覆蓋兩次或以上,那麼長度就可以直接計算,就是該區間的長度 剩下的情況就是cnt 1或cnt 0 2.先看葉子節點,因為是葉子沒有孩子了,所以被覆蓋兩次貨以上的長度就是0 無論cnt 1或cnt 0都是0,因為是葉子。3.不是葉子節點 且cnt 1.注意這裡,cnt 1確切...