移动端网页特效

1、触屏事件touch

移动端网页特效

 

 

2、触摸事件

TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等

移动端网页特效

 

var div = document.querySelector(‘div‘);
        div.addEventListener(‘touchstart‘, function(e) {
            // touches 正在触摸屏幕的所有手指的列表 
            // targetTouches 正在触摸当前DOM元素的手指列表
            // 如果侦听的是一个DOM元素,他们两个是一样的
            // changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
            // 因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
            console.log(e.targetTouches[0]);
            // targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
        });
        // 3. 手指在DOM元素身上移动事件
        div.addEventListener(‘touchmove‘, function() {
});
// 4. 手指离开DOM元素事件 div.addEventListener(‘touchend‘, function(e) { // 当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表 // 但是会有 changedTouches });

 

3、拖动元素

1.touchstart、touchmove、touchend可以实现拖动元素

⒉.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY

3.移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离

4.手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步曲:

(1)触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置

(2)移动手指touchmove :计算手指的滑动距离,并且移动盒子

( 3)离开手指touchend:  这一步视情况可不添加

注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();

 

4、移动端click300ms延时

原因:移动端屏幕双击会缩放页面

https://www.jianshu.com/p/6e2b68a93c88

  1、禁用缩放  user-scalable = no 

  2、利用touch封装事件:检测用户触摸时间,触摸和离开的时间小于150ms则算点击,不算缩放

 

5、fastclick

 

6、swiper

 

移动端网页特效

上一篇:Delphi XE5 Android 运行黑屏卡死的解决方法


下一篇:【Android Developers Training】 59. 管理图片存储