“造轮子“——使用Zepto.js(jQuery)开发H5滑动插件

发送到手机
使用"扫一扫"即可发送至手机

H5滑动简易开发指南


H5一词是由W3C制定的HTML5标准演化而来,时至今日,已经脱离其本身的意义,在特定环境下,H5表示的是在移动端供用户翻页浏览的动画实例。 


现在互联网上,各种H5工具层出不穷,一个毫无开发经验的人也能轻松做出一个精美的H5动画,但是,对于开发者而言,最让人愉悦的方式还是编程实现。 得益于新技术带来的便利,现在开发一个具有基本功能的H5也会很容易,gitHub上一个1000star的H5插件,也不过200多行代码,现在我们进一步精简其 的功能,来一次H5插件开发实践。  这里我们使用的是移动端的zepto类库,熟悉jQuery的基本可以当jQuery进行操作。

Zepto(jQuery)插件的基本架构

  • 首先我们新建一个[SliderName]的js文件,比如 dxSlider.js

  • 定义严格模式,新建一个匿名函数,然后往里面传入Zepto,这样的好处是避免$冲突

    'user strict';
    (function($){
    
    })(Zepto)


  • 我们在匿名函数里构建插件的基本结构

    $.fn.dxSlider = function(){
      //选项接口,提供默认选项,opt是自定义来替换默认选项
      var options = $.extend({
          mode:"default" //模式(这里只有一种可选)
          arrow: true   //是否需要箭头
      },opts) 
      return this.each(function(){
    
      })//返回值,在这里构建你的插件代码
    } //提供的插件接口

  • 建立HTML结构,以及一些必要的css样式

  <div id="page2" class="page"></div>
  <div id="page3" class="page"></div>
  <div id="page4" class="page"></div>
  <div id="page5" class="page"></div>


  * {
        margin: 0;
        padding: 0;
    }

    #page1 {
        background-color: #8fcb87;
    }

    #page2 {
        background-color: #ffdc7a;
    }

    #page3 {
        background-color: #75bce8;
    }

    #page4 {
        background-color: #792981;
    }

    #page5 {
        background-color: #ed174b;
    }

    .page {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .page:first-child,
    .current {
        z-index: 1;
    }

现在我们新建了五个页面,每个页面通过绝对定位占满屏幕,我们通过[z-index]控制页面的显示


  • 定义DOM事件,实现是上下滑动的翻页效果

    事件流
    • 我们当手指点在屏幕上的页面时,会触发touchstart事件,

    • 当我们手指在页面上拖动时,会触发touchmove事件,

    • 当我们手指离开屏幕时,触发touchend事件


    执行方法
    • touchstart时,我们新建一个方法获取当前的起始坐标点的Y坐标,yStart;

    • touchmover时,我们阻止默认事件(如果我们允许拖拽的话,则定义对应事件,这里不允许);

    • touchend时,我们新建方法获取当前坐标点的Y坐标,yEnd,通过比较yEnd与yStart的大小来判断用户的滑动方向;

    • 翻页方法,通过用户的翻页方向来确定执行上一页操作还是下一页操作

          //touch开始事件
          function tStart(e) {
            if (options.mode === 'default') {
              yStart = e.pageY; 
            }
          }
          //touch结束事件
          function tEnd(e) {
            if (options.mode === 'default') {
              yEnd = e.pageY;
              if (Math.abs(yEnd - yStart) > 50) {
                if (yEnd < yStart) nextPage();
                if (yEnd > yStart) prevPage();
              }
            }
          }
          //下一页
          function nextPage() {
            var cPage = pageWrap.children(".current");
            var index = cPage.index();
            if (index === (pages.length - 1)) return false;  //判断当前页面是否为最后一页
            cPage.removeClass('current').next().addClass("current");
            animation();
          }
          //上一页
          function prevPage() {
            var cPage = pageWrap.children(".current");
            var index = cPage.index();
            if (index === 0) return false; //判断当前页面是否为第一页
            cPage.removeClass('current').prev().addClass("current");
            animation();
          }
        // 全局绑定事件,这是一个事件代理,参数e为DOM事件的event对象
          $(document)
            .on('touchstart', '.page', function(e) {
              tStart(e.changedTouches[0]);
            })
            .on('touchmove', '.page', function(e) {
              e.preventDefault(); //禁止touchmove默认事件
            })
            .on('touchend', '.page', function(e) {
              tEnd(e.changedTouches[0]);
            })


    • 优化,实现伪翻页效果
      以上完成我们基本上可以实现page的翻页了,但是其中没有过渡,非常生硬,这时候我们需要依靠强大的css3动画为其制造一个伪翻页

      .current {
          -webkit-animation-duration: 1s; 
          animation-duration: 1s; // 动画持续时间
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both; //动画结束时的状态
      }
      
      //为用户下翻页获得的current执行next伪翻页
      .go2next .current {
          -webkit-animation-name: next;
          animation-name: next;
      }
      
      //为用户上翻页获得的current执行prev伪翻页
      .go2prev .current {
          -webkit-animation-name: prev;
          animation-name: prev;
      }
      
      //next伪翻页
      @keyframes next {
          from {
              -webkit-transform: translateY(100%);
              transform: translateY(100%);
          }
          to {
              -webkit-transform: none;
              transform: none;
          }
      }
      
      @-webkit-keyframes next {
          from {
              -webkit-transform: translateY(100%);
              transform: translateY(100%);
          }
          to {
              -webkit-transform: none;
              transform: none;
          }
      }
      //prev伪翻页
      @keyframes prev {
          from {
              -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
          }
          to {
              -webkit-transform: none;
              transform: none;
          }
      }
      
      @-webkit-keyframes prev {
          from {
              -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
          }
          to {
              -webkit-transform: none;
              transform: none;
          }
      }


      我们知道,go2next以及go2prev的类是我们事先没有命名的,我们需要在js中为pageWrap添上这个类,来判断其翻页方向,因此我们需要在js中加上

  •   function nextPage(){
        cPage.parent().removeClass().addClass("go2next");
      }
      function prevPage() {
            cPage.parent().removeClass().addClass('go2prev')
      }


    这样,一个基础的H5滑动插件我们便搭建完毕了,下面,我们只需要执行

       $("#pages").dxSlider();

    就可以查看效果了。

“造轮子“——使用Zepto.js(jQuery)开发H5滑动插件

“造轮子“——使用Zepto.js(jQuery)开发H5滑动插件

分享: