最近一直在忙專案,很少有時間回顧之前的知識,今天剛好要做乙個輪播,因為對相容性有一定的要求,使用了各種外掛程式和庫中的輪播,效果都不是很理想,一怒之下,使用原生js封裝了乙個輪播元件,其中重要的功能就是乙個動畫,看了一下以前封裝的函式,千瘡百孔,又進行了重新封裝,先上**,有詳細的備註。
計時器的是直接掛載到被操作的元素物件上的function animate(el, target, step, dtime) ;
// 開啟乙個定時器,並將定時器掛載道當前元素上
el.timeid = setinterval(function ()
// 當目標距離與當前位置的差距小於步長時,直接當目標的水平位置設定為目標距離,並清除定時器後跳出函式
if (math.abs(current - target) < math.abs(step))
// 定時器每執行一次,就讓元素移動乙個 步長
el.style.left = current + step + 'px';
}, dtime)
}
el.timeid
方便復用
獲取當前水平偏移位置時,沒使用 offsetleft,因為當元素存在外邊距時會產生誤差,故還時使用原生獲取left 的,並對不存在的問題做了判斷處理。
使用原生js封裝Ajax函式
對與原生ajax的封裝,依然需要遵循請求的四個步驟 1 建立xmlhttprequest物件 2 監聽onreadstatechange函式 3 使用open函式新增引數 4 使用send函式傳送請求 首先,封裝建立xhr的函式 1 2 createxhr 3 建立xhr相容物件4 5functio...
原生js封裝函式
原理是對元素的所有的子節點做乙個遍歷。然後做乙個判斷,如果是子元素節點 nodetype 1 則遍歷該子元素的所有的子節點,用遞迴檢查是否包含空白節點 如果處理的子節點是文字節點 nodetype 3 則檢查是否是純粹的空白節點,如果是,就將它從xml物件中刪除。1 function removew...
使用js閉包封裝乙個原生的模態框
現在都是用的是人家封裝的框架什麼的,但是對於底層的了解也是必須的,不然就無法提公升,下面分享乙個2 years ago 自己封裝的乙個提示框 樣式很簡單 適用於任何解析度 具體 如下 該js 用於資料載入時給予模態框提示,以增加使用者體驗 since 1.0.1 param jquery autho...