• Web APIs---15. 移动端端网页特效(1)


    1. 触屏事件

    1.1 触屏事件概述

    移动端的动画效果能用C3写就尽量用C3写,如果非要交互,那么就用CS搭配着C3来写

    <body>
        <div></div>
        <script>
            //1. 获取元素
            var div = document.querySelector('div');
            div.addEventListener('touchstart', function() {
                console.log('我摸了你');
            });
            div.addEventListener('touchmove', function() {
                console.log('我在滑动');
            });
            div.addEventListener('touchend', function() {
                console.log('我溜了');
            });
        </script>
    </body>
    

    1.2 触摸事件对象TouchEvent

    对于触摸事件对象主要记忆一下三个属性

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

    1.3 移动端拖动元素

    <body>
        <div></div>
        <script>
            //(1)触摸元素 touchstart:获取手指初始坐标,同时获得盒子原来位置
            //(2)移动手指 touchmove:计算手指滑动距离,并且移动盒子
            //(3)离开手指 touchend:
            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; //targetTouches[0]表示第一个手指
                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>
    </body>
    

    2. 移动端常见特效

    2.1 移动端的轮播图

    -在以前携程网的代码基础上进行修改。

    • 无缝滚动

    • classList属性:是H5新增的一个属性,返回元素类名。但是ie10以上版本才支持

    <body>
        <div class="one two"></div>
        <button>开关灯</button>
        <script>
            //1. classList返回元素的类名
            var div = document.querySelector('div');
            console.log(div.classList); //DOMTokenList(2) ["one", "two", value: "one two"]   以伪数组的形式返回元素所有类名
            console.log(div.classList[0]); //one    返回第一个类名
    
            //2. classList为元素缀加类名   不覆盖原来的类(className是覆盖原来的类)
            div.classList.add('three'); //现在div这个元素有3个类名了。注意是three 而不是.three
    
            //3. classList删除元素的类名
            div.classList.remove('one'); //div的one类就被删除了
    
            //4. classList切换元素类名
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                document.body.classList.toggle('bg'); //点击一下按钮就让body加上这个类,再点击一下就让body去掉这个类
            })
        </script>
    </body>
    
    <style>
        .bg {
            background-color: black;
        }
    </style>
    

    具体代码

    • 结构部分
    <!-- 返回顶部模块 -->
    <div class="goBack"></div>
    
    <!-- 顶部搜索 -->
    <div class="search-index"></div>
    
    <!-- 焦点图模块 -->
    <div class="focus">
        <ul>
            <li><img src="upload/focus3.jpg" alt=""></li>
            <!--用于无缝滚动(考虑到移动端用户会拉图片)-->
            <li><img src="upload/focus1.jpg" alt=""></li>
            <li><img src="upload/focus2.jpg" alt=""></li>
            <li><img src="upload/focus3.jpg" alt=""></li>
            <li><img src="upload/focus1.jpg" alt=""></li>
            <!--用于无缝滚动-->
    
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    
    • CSS
    /* goBack */
    .goBack {
        display: none;
        /*返回顶部的小箭头先隐藏,当页面滚动到某一部分的时候才显示*/
        position: fixed;
        bottom: 50px;
        right: 20px;
         38px;
        height: 38px;
        background: url(../images/back.png) no-repeat;
        background-size: 38px 38px;
    }
    
    
    /* focus */
    .focus {
        position: relative;
        padding-top: 44px;
        overflow: hidden;
        /*保证不让5个焦点图的宽ul撑大页面*/
    }
    
    .focus img {
         100%;
    }
    
    .focus ul {
        overflow: hidden;
        /*清除浮动*/
         500%;
        /*让ul宽一点,否则就算每个小li添加浮动,也不会在一行显示*/
        margin-left: -100%;
        /*让ul往左走一个focus的宽度,这样焦点框里初始显示的才是第一张图,而不是第三张图片*/
    }
    
    .focus ul li {
        float: left;
         20%;
    }
    
    .focus ol {
        position: absolute;
        bottom: 5px;
        right: 5px;
        margin: 0;
    }
    
    .focus ol li {
        display: inline-block;
         5px;
        height: 5px;
        background-color: #fff;
        list-style: none;
        border-radius: 2px;
        transition: all .3s;
        /*让小圆点缓慢变化*/
    }
    
    .focus ol li.current {
         15px;
    }
    

    -JS

    window.addEventListener('load', function() {
        //1. 获取元素
        var focus = document.querySelector('.focus');
        var ul = focus.children[0];
        var ol = focus.children[1];
        //获得focus的宽度
        var w = focus.offsetWidth;
        console.log(w);
    
        //2. 利用定时器自动播放轮播图
        var index = 0;
        var timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s'; //为ul添加 过度效果,让焦点图光滑滑动
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    
        //3. 无缝滚动
        ul.addEventListener('transitionend', function() {
            //transitionend:监听过度完成事件     这里是等到过度完成之后再去判断
            //当从indx=2到index=3过度结束之后,index=3立马没有过度地跳到index=0
            if (index >= 3) { //当图片走到最后一张的时候
                ul.style.transition = 'none'; //跳回到第一张这个动作是快速跳回,不做动画
                //跳回到第一张之后,重新滚动
                index = 0;
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)'; //跳回到初始位置的第一张
            } else if (index < 0) {
                ul.style.transition = 'none';
                index = 2;
                var translatex = -index * w;
            }
            //4. 小圆点跟随变化效果    小圆点的变化一定是写在过度结束之后,所以写在该代码块立马
    
            //一下这种思想避免的for循环的排他思想
            //把ol里带有current类名的li选出来,去掉类名 remove
            ol.querySelector('li.current').classList.remove('current'); //ol.querySelector('li.current')也可以写成ol.querySelector('li.current');
            //让当前索引号的小li加上current add
            ol.children[index].classList.add('current');
        });
        //5 手指滑动轮播图
        //触摸元素touchstart: 获取手指初始位置
        var startX = 0;
        var moveX = 0; //记录移动距离
        var flag = false;
        ul.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX; //targetTouches[0]表示第一个手指
            //用手滑动的时候不需要再自动播放轮播图
            clearInterval(timer);
        });
        //移动手指:计算手指滑动距离,并且移动盒子
        ul.addEventListener('touchmove', function(e) {
            //计算移动距离
            moveX = e.targetTouches[0].pageX - startX;
            //移动盒子: 盒子原来的位置+手指移动的距离
            //盒子原来的位置:-index*w   滚动到第几张图片就是第几张图片乘以盒子的宽度
            var translatex = -index * w + moveX;
            //手指拖动的时候,不需要动画效果所以要把过度去掉
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
            flag = true;
            e.preventDefault(); //阻止滚动屏幕的行为
        });
        //手指离开 根据移动距离判断是回弹还是播放上一张下一张
        ul.addEventListener('touchend', function(e) {
            if (flag) { //flag=true的时候,说明用户已经移动过手指,之后我们再进行响应的计算
                //(1)如果移动距离大于50像素我们就播放上一张或者下一张
                if (Math.abs(moveX) > 50) {
    
                    if (moveX > 0) { //如果是右滑就是播放上一张moveX是正值
                        index--;
                    } else { //如果是左滑就是播放下一张moveX是负值
                        index++;
                    }
                    var translatex = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + translatex + 'px)';
    
                } else {
                    //(2)如果移动距离小于50像素我们就回弹  会弹就是不让index有任何变化
                    var translatex = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                }
            }
            // 手指离开的时候就开启定时器
            clearInterval(timer); //开定时器前先清一次
            //开启定时器
            timer = setInterval(function() {
                index++;
                var translatex = -index * w;
                ul.style.transition = 'all .3s'; //为ul添加 过度效果,让焦点图光滑滑动
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }, 2000);
        });
    
        //返回顶部制作
        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);
        })
    })
    

    2.2 click延迟解决方案


    上述函数封装一次只能为一个元素解决click延时的问题,若是有100个元素就要调用100次

    第三个解决方案:就是使用fastclick插件,下文将会介绍https://github.com/ftlabs/fastclick

    3. 移动端常用开发插件

    3.1 什么是插件

    3.2 fastclick.js插件的使用

    <!-- 1.引入 -->
    <script src="fastclick.js"></script>
    
    <body>
        <div></div>
        <script>
            //2. 使用
            //利用下面这段代码,页面中的元素就都解决了click延时问题了
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
            //下面代码中的click将不再延迟
            var div = document.querySelector('div');
            div.addEventListener('click', function() {
                alert(11);
            });
        </script>
    </body>
    

    3.3 Swiper插件的使用

    这是开源、免费、强大的触摸滑动插件。下面以写JD移动端的轮播图为例子(在原先的代码上修改)
    中文官网地址: https//www.swiper.com.cn/

    • 登陆网站-->点击导航栏的"获取Swiper"-->点击“下载Swiper”-->下载swiper-4.5.3.zip

    • 解压下载的文件-->找到demos文件夹(里面全是滑动的样式案例.html)。本案例选用:030-pagination.html

    • disk文件夹下有上述案例对应的css和Js文件(ps:cs文件夹下的swiper.css和swiper.css是两个一样的文件,知识swiper.min.css是经过压缩的)。本案例选用swiper.min.css和swiper.min.js文件,将其分别放入css和js的文件夹下

    • 引入插件相关文件
      同时新建自己的JS文件,并引入

    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入swipercss文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入swiper js 文件 -->
    <script src="js/swiper.min.js"></script>
    <!-- 引入我们自己的js文件 -->
    <script src="js/index.js"></script>
    
    • 按照规定语法使用
      (1)打开030-pagination.html文件
      (2)查看网页源代码
      (3)先复制结构,
    <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    

    (4)并将上述结构中的Slide 1,Slide 2,Slide 3...替换为相应的图片,最终的结构修改如下

    <!-- 滑动图 -->
    <div class="slider">
        <!-- Swiper 注意不要更改里面的结构和类名 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="upload/banner.dpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner1.dpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner2.dpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner3.dpg" alt="">
                </div>
    
            </div>
            <!-- Add Pagination -->
            <!-- 这里就是小圆点 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    

    (5)复制相关样式,粘贴到index.css中

    .swiper-container {
           100%;
          height: 100%;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
    

    (6)复制js相关内容并复制到自己的index.js文件中

    window.addEventListener('load', function() {
        //复制的内容
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
        });
    })
    

    有其他需要可以查看该网站导航栏上的中文教程以及API文档等内容。

    • 如果有JS内容需要修改,可以查看API文档里每个参数的含义
    • 如何是CSS内容需要修改,可用在页面上检查元素,得到相关的类名,再去我们自己的CSS里为这个类名写一个新的样式覆盖掉原来的样式,注意添加 !important用于提高层级
    综上:找到想要的样式,查看源码,从上到下往自己的文件中引入,再进行相应的修改即可。

    3.4 其他移动端常见插件

    3.5 插件的使用总结

    3.6 练习-移动端视频插件zy.media.js

    • demo实例文件.html是提前准备的,查看源代码(主要从这里复制码),并找到需要引入哪些文件(zy.media.min.js和zy.media.min.css)
    • 具体内容查看lesson7里面的05-视频插件,基本上就是把demo里面的内存抄写到index.html中的
  • 相关阅读:
    centos7 安装jmeter5.1
    centos7 安装jdk1.8
    es6学习笔记(一)环境搭建
    Django-filter报错:__init__() got an unexpected keyword argument 'name'
    django fields lookup methods(lookup类型)
    django笔记-model
    Git-简单使用
    jenkins-master-slave节点配置总结
    Git-简单使用
    MySQL explain详解
  • 原文地址:https://www.cnblogs.com/deer-cen/p/12311194.html
Copyright © 2020-2023  润新知