swiper.js-全屏效果实现

bi3643 8年前

来自: http://my.oschina.net/u/2352644/blog/614984


针对swiper.js的全屏动画切换,我们已经简单分析和介绍过一次:

http://my.oschina.net/u/2352644/blog/487902 这个里面非常简单的分析了如何加入我们的动画效果,swiper现在已经出现了3.0版本,我们这里就是使用swiper3.0去开发我们的更贴近真实的项目。

下载swiper3.0 http://www.swiper.com.cn/download/index.html 推荐下载演示包,这样我们可以充分了解swiper都可以实现什么!

一,原理简单分析

1.加入动画

上一个博客只是分析了在active类名下加入我们的动画样式就可完成我们的效果呈现,这里我们二次的分析其中的更多知识,了解别人的原理我们在构建类似效果就可以自己动手了。

首先打开demo文件下,预览这个html页面,和复制此html页面:

然后打开dist文件夹,把这个html重新命名自己喜欢的名称,我的是demo2

demo2.html就是我们的实战页面,我们打开页面,把css和js的引入路径从全局改为dist下的css和js上:

<!DOCTYPE html>  <html>  <head>      <meta charset="utf-8">      <title>demo2</title>      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">      <!-- Link Swiper's CSS -->      <link rel="stylesheet" href="css/swiper.min.css">      <!-- Demo styles -->      <style>      html, body {          position: relative;          height: 100%;      }      body {          background: #eee;          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;          font-size: 14px;          color:#000;          margin: 0;          padding: 0;      }      .swiper-container {          width: 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;      }      </style>  </head>  <body>      <!-- Swiper -->      <div>          <div id="aa">              <div>Slide 1</div>              <div>Slide 2</div>              <div>Slide 3</div>              <div>Slide 4</div>              <div>Slide 5</div>              <div>Slide 6</div>              <div>Slide 7</div>              <div>Slide 8</div>              <div>Slide 9</div>              <div>Slide 10</div>          </div>          <!-- Add Pagination -->          <div></div>      </div>      <!-- Swiper JS -->      <script src="js/swiper.min.js"></script>      <!-- Initialize Swiper -->      <script>      var swiper = new Swiper('.swiper-container', {          pagination: '.swiper-pagination',          paginationClickable: true,          direction: 'vertical'      });            </script>  </body>  </html>

我们预览测试,pc就可以查看,保证没有任何问题,我们firebug查看是不是当前所在位置有active的类名:

2.显示切换

同上次分析结果吻合,3.0同样是这个加入动画原理,我们进一步分析每次滑动是如何显示当前div(这一屏内容)的:

我们利用firebug进一步分析:

 

 分别切换到1 2 3屏我们发现在父容器.swiper-wrapper 上改变的是transform: translate3d(0px, -618px, 0px);的属性值,

变化3d效果中移动处理y轴在发上变化,从0到-309到-618,我们试想一下这个原理方式:

上面是初始状态,默认变化3d的位移y轴值是0。

当我们向下切换时,y轴值就会变成-1*一屏高度,这样就利用变化移动显示了第二屏:

其实做过tab切换的就知道这个切换原理,不过以前是利用定位处理去改变left或者top的值实现切换,这里使用的是css3变换位移处理,我们把最外层父容器定好宽高和设置超出隐藏,那么就可以去切换我们的显示内容了,我们firebug这个.swiper-container可以查看是不是有超出隐藏。

3.方向判断

我们预览页面,从按下到抬起,会识别出我们是向上或者向下,然后去切换我们的显示内容,

我们事件触发的过程就是

1.按下

2.移动/没有移动

3.抬起

我们针对这三个事件可以分别获取event的pagex和pagey,我们根据抬起的x和y与按下的x与y去比较就可分析出操作方向:

我们针对抬起和按下的坐标,构造三角形可以去分析出移动的方位:

我们算数x1 x2的差值取整和y1 y2差值取整,如果x的差值/y差值大于1说明方向不是左就是右,当然跟具体的分析我们可以去具体研究。

4.弹性下拉分析

我们在第一屏,向下拖拽:

这个效果我们在app里面非常常见,在app就会刷新页面,这里只是单纯的弹动!

这个实现和我们的切换类似,也是改变3d变化位移处理y值,不过这个y值不是在根据屏幕高度就处理,而是带有极限和时时改变的。

1.当前是第一屏(办法很多,比如一个全局变量,根据y值改变而变化)

2.记住mousedown事件event的pagey

3.在mousemove中不断获取event的pagey和down的pagey做差值,然后复制到3d变换位移出的y上

4.设置一个极限值比如100,差值和100比较如果大于100了3d位移y一直赋值为100。

5.全屏css样式

这个说的话太绕了,我们一张图表示:

绿色代表浏览器窗口,也就是window

黄色就是html标签,我们宽度设置为100%就等于窗口宽度,高度设置为100%就是窗口高度

橘黄色是body标签,这个同html的设置,都设置为100%,宽高等于了窗口宽高

蓝色就是我们作于切换容器的div,在宽高100%等于窗口基础上,设置超出隐藏,首先保证了滚动条的不出现,然后里面的元素在这个div预览时,这个div就起到了窗户的作用,我们改变窗户里面内容位置就可以看到不同的内容了。

使用百分比设置宽高是全局切换的方法。

6.pc和移动端的事件

我们上面一直说到,切换的触发是在mousedown move up组合事件中产生的,在手机登移动设备上,dom提供了移动设备的一套处理,

touchstat对应mousedown

touchmove对应mousemove

touchend对应mouseup

我们针对苹果和安卓系统这种兼容处理是没有问题的,不过在wp8上,也就是微软手机是不被支持的,要用另一套事件做兼容处理,我们查看swiper.js源码,看这个位置:

 

pointer和mspointer是对ie浏览器的支持,能力监测来实现不同移动设备支持。

二,搭建全屏切换动画

 

未完