更新時(shí)間:2022-12-20 來源:黑馬程序員 瀏覽量:
在之前的講解中,我們使用移動(dòng)端內(nèi)置的touch事件模擬了單擊效果和輪播圖切換效果。今天筆者將會(huì)介紹一下如何使用移動(dòng)端第三方插件庫,用簡潔的代碼實(shí)現(xiàn)移動(dòng)端特效。
Fastclick插件是由FTLabs開發(fā)的JavaScript庫,它簡單易用,上手比較快,解決了click事件在移動(dòng)端觸發(fā)時(shí)有大約300ms延時(shí)的問題。另外,F(xiàn)astclick在PC端也能響應(yīng)并解決了延時(shí)問題,這極大提高了用戶瀏覽體驗(yàn)的效果,使操作更加靈敏。
1.引入方式
通過官網(wǎng)下載fastclick.js至本地,然后在HTML網(wǎng)頁中使用script標(biāo)簽引入fastclick.js文件即可,引入方式如下。
<script src="fastclick.js"></script>
2.初始化
通過JavaScript方式對Fastclick進(jìn)行實(shí)例化,示例代碼如下。
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); }
上述代碼中,F(xiàn)astClick.attach
方法的參數(shù)可以是任意的DOM元素,在這里使用document.body表示會(huì)將document.body下面的所有元素都綁定為Fastclick。
此外,還可通過jQuery方式對Fastclick進(jìn)行實(shí)例化,示例代碼如下。
$(function() { FastClick.attach(document.body); });