手機網站開發:滑動翻屏效果 jquery觸摸屏滑動效果

最近閑下來,仔細想想,其實挺簡單的,主要就是用scrollleft,隻要能解決點擊事件和拖拽滑動事件的沖突問題就行瞭。

因為我相信大部分能用到這個效果的應該不隻是用來展示圖片,大多數還是用來的顯示按鈕的。這也是主要的麻煩吧。

解決方法是:使用mousedown事件代替 click事件,因為容器內部的元素的mousedown事件在容器的mousedown事件之前。

而如果用click的話,就是在容器的mousedown事件之後瞭,鼠標點擊按鈕之後,兩個mousedown事件都會觸發的。

這樣我們在按鈕的mousedown事件裡面設定一個 settimeout定時器,將真正的點擊事件函數委托給10ms之後再來執行。

在mousemove裡面將這個定時器取消,如果鼠標點擊之後移動的話,那麼定時器就會取消。

如果不移動就松開的話,那麼就會在10ms之後出發點擊事件。

還有一個就是,如何保證文字不被選中和圖片不被拖移,

有一個小小的插件,下載的別人的,在裡面又加瞭一句,為瞭做一下firefox的兼容性。

應該沒有其他的問題瞭,唯一的問題就是,js總是有點不太流暢。

 Posted in:  CSS&HTML    Tags: jquery, 仿iphone, 滑動

發佈留言