wap圖片滾動特效無css3元素純js腳本編寫_javascript技巧

問題一：給圖片加上鏈接后，在拖動的時候總是跳到其他頁面

問題根源主要是不能判斷是點擊還是拖動，手機事件一般順序是 touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根據(jù)不同手機可能會有不同。觸屏手機的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后執(zhí)行的，當(dāng)我們有touchstart，touchmove，touchend處理完后，如果不進行return或取消默認(rèn)就會觸發(fā)click事件，這樣網(wǎng)頁就跳走了，解決辦法是記錄touchstart的坐標(biāo)點和touchmove的坐標(biāo)點，根據(jù)兩個坐標(biāo)點算出觸點是否移動過，其中值得關(guān)注的是事件的Event參數(shù)，觸屏一般是 event.touches，event.targetTouches，event.changedTouches。我在測試當(dāng)中發(fā)現(xiàn)者三個參數(shù)的值時一樣的，不過值得注意的是touchend事件不會得到觸點坐標(biāo)（也或許是設(shè)備問題），在移動的時候touchmove會不斷出發(fā)，有時候touchmove會不觸發(fā)，其中就是瀏覽器自帶一下功能把觸點（或鼠標(biāo)）脫離了選中的元素，比如上時間按住會出現(xiàn)菜單，（pc上圖片就會生成一個可以拖動的縮略圖），這樣就要在touchstart（mousedown）的時候先 event.preventDefault();取消默認(rèn)。

問題二：網(wǎng)頁中的上下滾動條不能在拖動圖片的時候滾動

相信這個問題只要制作過得都會遇到，其實主要是在移動（touchmove，mousemove）的時候取消了默認(rèn)事件event.preventDefault(),在這里我們需要做的是，是否移動獲得觸點和開始的觸點是否一致，如果一致就直接返回，還要算出是移動的x軸多一點還是y軸移動的多一點，這樣我們就可以做左右滑動的時候取消默認(rèn)，在上學(xué)的時候不取消；

問題三： 并且不能兼容pc機器上的拖動

這是因為在綁定事件的時候不能完全考慮事件名稱是touchstart還是mousedown ，從網(wǎng)上搜了一下，感覺做的不做，就直接抄過來了

大概是這個意思，根據(jù)設(shè)備不同綁定不同的事件

其實還碰到了很多的問題，就不一一說明了

不多說了，直接把代碼貼出來了，如果有什么不太好的地方，還請多多包含和提出意見

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

wap圖片滾動特效無css3元素純js腳本編寫_javascript技巧

wap圖片滾動特效無css3元素純js腳本編寫_javascript技巧:手機圖片滑動切換，網(wǎng)上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行；還有就是用到css3里的 transform：translate（x,y）;移動元素,不過發(fā)現(xiàn)在不支持css3的設(shè)備上馬上完蛋了，所以下定決心自己做一個，誰知出現(xiàn)了很多的問題，其中最重要的是給圖

推薦度：

點擊下載本文 文檔為doc格式