移動端網頁特效

2022-09-23 08:17:03 字數 2456 閱讀 1165

移動端瀏覽器相容性較好,我們不需要考慮以前js的相容性問題,可以放心的使用原生js書寫效果,但是移動端也有自己獨特的地方。比如觸屏事件touch(也稱觸控事件),android和ios都有。

touch物件代表一個觸控點。觸控點可能是一根手指,也可能是一根觸控筆。觸屏事件可響應使用者手指(或觸控筆)對螢幕或者觸控板操作。

常見的觸屏事件如下:

觸屏touch事件

說明

touchstart

手指觸控到一個dom元素時觸發

touchmove

手指在一個dom元素上滑動時觸發

touchend

手指從一個dom元素上移開時觸發

touchevent是一類描述手指在觸控平面(觸控式螢幕、觸控板等)的狀態變化的事件。這類事件用於描述一個或多個出點,使開發者可以檢測觸點的移動,觸點的增加和減少,等等。

touchstart、touchmove、touchend三個事件都會有各自有事件物件。

觸控事件物件重點我們看三個常見物件列表

觸控列表

說明touches

正在觸控式螢幕幕的所有手指的一個列表

targettouches

正在觸控當前dom元素上的手指的一個列表

changedtouches

手指狀態發生了改變的列表,從無到有,從有到無變化

因為平時我們都是給元素註冊觸控事件,所以重點記住targettouches。

1.touchstart、touchmove、touchend可以實現拖動元素。

2.但是拖動元素需要當前手指的座標值,我們可以使用targettouches[0]裡面的pagex和pagey。

3.移動端拖動的原理: 手指移動中,計算出手指移動的距離。然後利用盒子原來的位置+手指移動的距離。

4.手指移動的距離: 手指滑動中的位置減去手指剛開始觸控的位置。

拖動元素三部曲:

(1)觸控元素touchstart: 獲取手指初始座標,同時獲得盒子原來的位置。

(2)移動手指touchmove: 計算手指的滑動距離,並且移動盒子

(3)離開手指touchend;

注意:手指移動也會觸發滾動螢幕,所以這裡要阻止預設的螢幕滾動e.preventdefault()

移動端輪播圖:

1 window.addeventlistener('load', function

() , 2000);

16//

等著我們過渡完成之後,再去判斷,監聽過渡完成的事件 transitionend

17 ul.addeventlistener('transitionend', function

() else

if ( index < 0)

33//

3. 小圓點跟隨變化

34//

把ol裡面li帶有current類名的選出來去掉類名 remove

35 ol.queryselector('.current').classlist.remove('current');

36//

讓當前索引號的小li 加上current add

37 ol.children[index].classlist.add('current');

38});

39//

4.手指滑動輪播圖

40//

觸控元素 touchstart:獲取手指初始座標

41var startx = 0;

42var movex = 0;

43var flag = false

;44 ul.addeventlistener('touchstart', function

(e) );

49//

移動手指touchmove:計算手指的滑動距離,並且移動盒子

50 ul.addeventlistener('touchmove', function

(e) );

61//

62 ul.addeventlistener('touchend', function

(e) else

72var translatex = -index *w;

73 ul.style.transition = 'all 0.3s';

74 ul.style.transform = 'translatex(' + translatex + 'px)';

75 } else80}

81//

手指離開時候重新開啟定時器

82clearinterval(timer);

83 timer = setinterval(function

() , 2000);

89});

90 })

1

23