webAPI
01-動畫封裝
-
應用到的知識點
-
點擊事件
-
給元素設置一個絕對定位
-
定時器(setInterval)
-
-
封裝動畫1的步驟:
- 讓元素設置為絕定位
- 設置元素的開始位置(從哪開始移動)
- 設置元素的目標位置(移動到哪)
- 設置元素每次移動的距離
- 設置元素每次移動的時間間隔(越短越好)
-
封裝動畫1遇到的問題
-
如果快速的點擊按鈕,動畫會有一個加速的效果
原因: 多次點擊按鈕的時候,在程序中相當于開啟了多個定時器導致的 -
如何解決?
解決途徑: 不管點擊多次按鈕,始終只有一個定時器 -
解決問題的核心步驟
1. 將 var timeID = null; 設置為一個全局的公共變量2. 判斷是否存在,如果存在就停住定時器,然后子在開啟新的定時器(排他思想) //先判斷程序中是否有定時器 if(timeID != null) {//代表已經存在定時器, 立即將存在的定時器刪除掉clearInterval(timeID);timeID = null; }
-
-
將動畫2封裝成一個函數,方便以后調用
這個函數有5個參數: 哪個元素設置動畫, 元素的開始位置 元素的結束位置 元素每次移動的距離 元素每次移動的時間間隔function animation(element, current, target, step, time) {//先判斷程序中是否有定時器if(timeID != null) {//代表已經存在定時器, 立即將存在的定時器刪除掉clearInterval(timeID);timeID = null;}timeID = setInterval(function(){//開始移動元素的位置if(current >= target) {current = target;clearInterval(timeID);}else {current += step;}//設置box的位置element.style.left = current + 'px';}, time); } -
如果將動畫封裝成一個函數后,每次點擊都是從開始的位置 0 重新執行程序
-
怎么解決?
讓元素的 current 值 始終 和 元素實際移動后的位置保持一致 -
在解決方案中有什么問題?
如何獲取當前元素的位置? DOM.offsetLeft ----> 左側的距離位置 DOM.offsetTop ----> 上邊的距離current = 當前元素的位置; -
最后的解決方案
在函數中設置:current = element.offsetLeft;
-
-
為什么當頁面中出現多個元素的時候,動畫只能讓最后一個元素執行動畫?
-
為什么?
點擊按鈕的時候, 程序中共用了一個定時器導致的 -
怎么解決
每一個元素(對象)應該對應一個定時器在每一個timeID綁定一個對象function animation(element, current, target, step, time) {//讓curren 值始終和當前元素的位置保持一致current = element.offsetLeft;//先判斷程序中是否有定時器if(element.timeID != null) {//代表已經存在定時器, 立即將存在的定時器刪除掉clearInterval(element.timeID);element.timeID = null;}element.timeID = setInterval(function(){//開始移動元素的位置if(current >= target) {current = target;clearInterval(element.timeID);}else {current += step;}//設置box的位置element.style.left = current + 'px';}, time); }
-
-
為什么元素從右向左移動的時候沒有動畫效果了?
-
為什么?
我們在程序中原來只是簡單的判斷 開始位置和結束位置 值的大小,而現在 向左移動的時候,開始位置的值就是比目標位置的值要大,所以動畫就停止了條件判斷寫的有問題:if(current >= target) {current = target;clearInterval(element.timeID);} -
怎么解決?
應該是求兩點之間的距離 和 每次移動的距離比較大小1.在確定當前位置是否移動到了終點位置(目標位置), 要通過計算兩點之間的距離實現 if(Math.abs(target - current) <= Math.abs(step)) {current = target;clearInterval(element.timeID); }else {current += step; }2.當元素向左移動的時候,保證每次移動的距離 step 是一個負數(向左移動為負)//開始移動元素的位置 if(current > target) {// 設置為負數step = -Math.abs(step); }
-
-
動畫的最后一個問題,動畫沒有執行完,又可以執行另外一個動畫
設置一個標志位(節流閥)
02-BOM中獲取元素的信息
-
難點在哪?
這個知識點容易和前面鼠標位置信息混淆 -
復習獲取鼠標位置信息
-
怎么獲取鼠標位置信息?
通過事件對象參數獲取 -
獲取鼠標的坐標信息
- 事件對象參數.clientX [獲取鼠標的橫坐標, 相對可視區域的]
- 事件對象參數.pageX [獲取鼠標的橫坐標, 相對整個頁面,包括滾動條出去的位置]
- 事件對象參數.screenX [獲取鼠標的橫坐標, 相對整個屏幕]
- 事件對象參數.offsetX [獲取鼠標的橫坐標, 相對當前事件源]
-
-
獲取頁面中元素的相關信息
-
offset系列的
- DOM.offsetLeft : 獲取元素在網頁中的位置信息
- DOM.offsetTop : 獲取元素在網頁中的位置信息
- DOM.offsetWidth : 獲取元素的寬度 ( 內容區域 + 邊框 + 內邊距 )
- DOM.offsetHeight: 獲取元素的高度 (內容區域 + 邊框 + 內邊距)
-
client系列
- DOM.clientLeft : 元素左邊框的寬度
- DOM.clientTop : 元素上邊框寬度
- DOM.clientWidth: 元素的寬度(內容器區域 + 內邊距)
- DOM.clientHeight: 元素的高度(內容器區域 + 內邊距)
-
scroll系列
-
DOM.scrollLeft : 元素內容區域滾動出去的距離(水平距離) [注冊一個滾動的事件 onscroll]
-
DOM.scrollTop: 元素內容區域滾動出去的距離(垂直距離) [注冊一個滾動的事件 onscroll]
//注冊一個滾動事件 div.onscroll = function() {console.log(this.scrollTop); } -
DOM.scrollWidth : 元素元素寬度(超出盒子寬度 + 左padding)
-
DOM.scrollHeight: 元素元素高度(超出盒子高度 + 上下padding)
-
-
03-拖拽案例
-
鼠標按下時候的事件
onmousedown -
鼠標抬起時候的事件
onmouseup
問題:
- 改變元素的位置:
- 相對定位
- 絕對定位(有一個參照元素 + 脫標)
- 固定定位
- margin
- padding
- 2d位移
- 3d位移
- offsetleft
- 就是用來保存元素位置信息的
- 不能設置
)
第八天—Swiper(插件))
第八天)
