移动端网页特效

11个月前 (09-26) 710次浏览 已收录 0个评论

触屏事件

touch对象对表一个触摸点,常见的触屏事件如下:

触屏事件对象

TouchEvent是一类描述手指在触摸平面上的状态变化的事件。以上三个触屏事件都是事件对象。其中常见的三个对象列表如下:

div.addEventListener('touchstart',function(e){
            console.log(e.touches);//正在触摸屏幕的所有手指的列表(所有被触摸的点)
        })

其中changedTouches是经常使用的,因为一般都是触摸元素。

移动端拖动元素

  • touchstart、touchmove、touchend可以实现拖动元素
  • 但是拖动元素需要当前手指的坐标值,我们可以使用targetTouches[0]里面的pageX和pageY来获得。
  • 移动端拖动原理:手指移动中计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离
  • 手指移动的距离:手指滑动中的位置 减去 手指刚开始触摸的位置。
手指移动也会触发滚动屏幕,所以这里要阻止默认的屏幕滚动e.preventDefault();
<script>
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            //移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); //阻止屏幕滚动的默认行为
        });
    </script>
结果演示

轮播图

classList属性(IE10+)

它可以返回元素的类名,并且它还可以用于在元素中添加、移除以及切换css类的功能。

追加类:

element.classList.add('类名'); //不会覆盖以前的类名

移除类名:

element.classList.remove('类名');

切换类名:

element.classList.toggle('类名'); //调用一次就加上,再调用一次就移除(有这个类,就去掉;没有这个类,就加上。

轮播图分析

自动播放功能

  • 开启定时器
  • 移动端移动可以使用translate移动
  • 添加过渡效果
  • 无缝滚动原理
    • 等图片滚动过渡完成后再去判断图片是否滚动了最后一张。
    • 判断条件:如果索引号等于3说明走到最后一张图片了,此时索引号要复原为0。
    • 此时图片去掉过渡效果,然后移动
    • 如果索引号小于0,说明是倒着走,索引号等于2
    • 此时图片去掉过渡效果,然后移动
  • 小圆点跟随变化效果
    • 把ol里面li带有current类名选出来并且去掉类名
    • 让当前索引号的小li加上crrent
    • 注意,是等着过渡结束之后再跟随变化,所以要写到transitionend事件里面。

手指滑动轮播图

  • 本质就是ul跟随手指移动,简单说就是移动端拖动元素
  • 触摸元素touchstart:获取手指初始坐标
  • 移动手指touchmove:计算手指的滑动距离,并且移动盒子
  • 手指触摸的时候就停止定时器
  • 离开手指touchennd:根据滑动的距离分不同的情况
    • 如果移动距离小于某个像素,就回弹到原来的位置
    • 如果移动距离大于某个像素,就自动滑动到上一张或下一张
<script>
        var foucus=document.querySelector('.foucus');
        var ul=foucus.children[0];
        var ol=foucus.children[1];
        var w=foucus.offsetWidth;//获得foucus的200px宽度
        var flag=false;//只有手指移动了才去计算距离,优化轮播图
        // 利用定时器自动轮播图片
        var index=0;
        var timer=setInterval(function(){
            index++;
            var translatex = -index * w;
            ul.style.transition='all .3s'; //过渡效果
            ul.style.transform = 'translateX('+translatex+'px)';//移动ul实现轮播
        },2000);
        //无缝滚动
        // 等图片滚动过渡完成后再去判断ul是否滚动了最后一张。
        //每一张图片过渡完成都会执行一次这个事件
        ul.addEventListener('transitionend',function(){
            if(index>=3){
                index=0;
                // 此时图片去掉过渡效果,然后让ul快速的跳到目标位置
                ul.style.transition='none';
                //利用最新的索引滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';//移动ul实现轮播
            }else if(index < 0){
                index=2;
                // 此时图片去掉过渡效果,然后让ul快速的跳到目标位置
                ul.style.transition = 'none';
                //利用最新的索引滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';//移动ul实现轮播
            }
            //小圆点跟随变化
            // 把ol里面li带有current类名选出来并且去掉类名
            ol.querySelector('li.current').classList.remove('current');
            // 让当前索引号的小li加上crrent
            ol.children[index].classList.add('current');
        })
        //手指滑动轮播图
        // 触摸元素touchstart:获取手指初始坐标
        var startX=0;
        var moveX=0;
        ul.addEventListener('touchstart',function(e){
            startX=e.targetTouches[0].pageX;      
            //手指触摸的时候就停止定时器
            clearInterval(timer); 
        })
        // 移动手指touchmove:计算手指的滑动距离,并且移动盒子
        ul.addEventListener('touchmove',function(e){
            //计算手指移动距离
            moveX=e.targetTouches[0].pageX - startX;
            //移动盒子: 盒子原来的位置+手指移动的距离
            var boxX=-index * w + moveX;
            //手指拖动的时候,不需要动画效果,所以要取消过渡效果,然后再移动
            ul.style.transition='none';
            ul.style.transform = 'translateX(' + boxX + 'px)';//移动ul实现轮播
            flag=true;//检测到手指已经移动
            e.preventDefault(); //阻止默认屏幕滚动的行为
        })
        //手指离开
        ul.addEventListener('touchend',function(e){
            if(flag){ //如果手指移动了,才去计算距离,点击的不会去计算
                // 如果移动距离大于某个像素,就自动滑动到上一张或下一张
                if (Math.abs(moveX) > 50) {
                    //如果是右滑,就播放上一张,moveX是正值
                    if (moveX > 0) {
                        index--;
                    } else {
                        //如果是左滑,就播放下一张,moveX是负值
                        index++;
                    }
                    // 如果移动距离小于某个像素,就回弹到原来的位置
                    var moveHandX = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + moveHandX + 'px)';//移动ul实现轮播
                } else {
                    //如果移动距离小于50像素就回弹
                    var moveHandX = -index * w;
                    ul.style.transition = 'all .1s';
                    ul.style.transform = 'translateX(' + moveHandX + 'px)';//移动ul实现轮播
                }
            }
            //手指离开后重新开启定时器
            clearInterval(timer); //先清除定时器
            timer = setInterval(function () {
                index++;
                var translatex = -index * w;
                ul.style.transition = 'all .3s'; //过渡效果
                ul.style.transform = 'translateX(' + translatex + 'px)';//移动ul实现轮播
            }, 2000);
        })
    </script>
结果演示

返回顶部

var goBack=document.querySelector('.goBack');
        var nav=document.querySelector('nav');
        window.addEventListener('scroll',function(){
            if(window.pageYOffset >= nav.offsetTop){
                goBack.style.display='block';
            }else{
                goBack.style.display='none';
            }
        })
        goBack.addEventListener('click',function(){
            window.scroll(0,0);
        })

click延时解决方案(推荐用插件)

移动端click事件会有300ms的延时,原因是移动端会考虑用户是否双击缩放屏幕,会有一个等待

解决方案1(不推荐)

禁用缩放

<meta name="viewport" content="user-scalable=no">

解决方案2(不推荐,一次只能调用一个)

利用touch事件自己封装这个事件

  • 当手指触摸屏幕的时候,记录当前事件
  • 当手指离开屏幕,用离开的时间 – 触摸的时间
  • 如果小于150ms,并且没有滑动过屏幕,那么就认为用户是在点击。
function clickTime(obj,callback){
            var isMove=false;
            var startTime=0;//记录触摸时候的时间
            obj.addEventListener('touchstart',function(e){
                startTime=Date.now();//记录触摸时间
            });
            obj.addEventListener('touchmove',function(e){
                isMove=true; //看看是否有滑动,有滑动算拖拽,不算点击
            });
            obj.addEventListener('touchend',function(e){
                //如果触摸了且离开事件小于150ms就算点击
                if(!isMove && (Date.now() - startTime) < 150){
                    callback && callback();//执行回调函数
                }
                isMove = false; //重置
                startTime=0;
            })
        }
        //调用
        clickTime(goBack,function(){
            //执行代码
        })

插件(举例)

fastclick解决延时插件

第一步:引入插件

<script src="fastclick.js"></script>

第二步:判断事件是否属于页面 (从插件文档里复制的下面代码)

if('addEventListener' in document){
            document.addEventListener('DOMContentLoaded',function(){
                FastClick.attach(document.body);
            },false);
        }

第三步:使用插件

var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            
        })

轮播图插件

swiper插件


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:移动端网页特效
喜欢 (0)

您必须 登录 才能发表评论!