IT技术互动交流平台

webapp应用模拟电子书翻页效果

作者:bjtqti  发布日期:2015-01-17 22:47:24

前言:

     现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势。所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了。这种程序也就是我们常说的单页应用程序,它也有一个英文缩写,叫SPA; 它最大的特点就是可以利用前端技术做出跨平台的移动应用。技术难点在于理解虚拟页面与物理页面之间的变换关系。一个偶然的机会,我由php程序员转为web前端开发,主攻javascript编程,不知不觉,已经快两年了。一直有一种想写一个webapp应用框架的冲动,但是各种原因,终究没有付出实践。于是打算从做一个简单的webapp应用开始,万事开头难,今天就搭一个简单的界面。

   

HTML代码:


<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>单页应用</title>
  <link rel='stylesheet' href='css/common.css' type='text/css'/>
</head>
<body>
<div class='container'> 
  <header>
    <h3>sameple test </h3>
  </header>
  <ul class='root'>
    <li class='page'>1</li>
    <li class='page'>2</li>
    <li class='page'>3</li>
    <li class='page'>4</li>
    <li class='page'>5</li>
    <li class='page'>6</li>
    <li class='page'>7</li>
    <li class='page'>8</li>
    <li class='page'>9</li>
    <li class='page'>10</li>
  </ul>
  <div class='left'>prev</div>
  <div class='right'>next</div>
  <footer>
    <h4>(c)2015 by ouyangli</h4> 
  </footer>
</div>
</body>
<script type='text/javascript' src='lib/core.js'></script>
</html>

css:


 1 ul , li {
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5 }
 6 h3,h4,p {
 7     margin:0;
 8     padding: 0;
 9 }
10 header {
11     position: absolute;
12     width:100%;
13     top:0;
14     left: 0;
15     z-index: 9;
16 }
17 
18 header h3 {
19     text-align: center;
20     height: 3em;
21     line-height: 3em;
22     border-bottom: 1px solid green;
23 }
24 
25 .container {
26     position: absolute;
27     width :320px;
28     height: 480px;
29     left:320px;
30     top:2em;
31 }
32 
33 .root {
34     position: absolute;
35     width :100%;
36     height: 100%;
37     top :0;
38     left:0;
39     overflow:hidden;
40     -webkit-perspective:1000;
41     -webkit-user-select: none;
42     -webkit-transform-style:preserve-3d;
43 }
44 
45 .page {
46     position: absolute;
47     width: 318px;
48     height: 100%;
49     overflow: hidden;
50     border:1px solid green;
51 }
52 
53 .left {
54     left :2px;
55 }
56 .right {
57     right:2px;
58 }
59 
60 .left,.right {
61     position: absolute;
62     top:45%;
63     width:3em;
64     height: 3em;
65     line-height: 3em;
66     text-align: center;
67     border-radius: 15%;
68     border:1px dashed blue;
69 }
70 
71 .left:hover,.right:hover {
72     background-color: #33ff44;
73     cursor:pointer;
74 }
75 
76 footer {
77     position: absolute;
78     width: 100%;
79     bottom: 0;
80 }
81 
82 h4 {
83     height: 3em;
84     line-height: 3em;
85     text-align: center;
86     border-top: 1px solid green;
87 }

 以上源码将会在页底提供打包下载,这里贴出中间过程,只是想让大家能明白,我是怎么一步一步把这个程序写出来的。如果有疑问的地方就给我留言好了,我会尽量回复。

演示地址:http://runjs.cn/detail/o4ql6f6a

细心的话,你会发现左上角有一个“乱码”,其实那是因为所有的页面都堆叠在一起,造成页数看不清了。这正是我们接下来要解决的问题之一。

js:


 1 //初始化
 2 ;(function(){
 3     var pages = document.querySelectorAll('li');
 4     var width = 320;
 5     var len = pages.length;
 6     var setpost = function(element){
 7         element.style.transform = 'translate3d('+width+'px, 0, 0)';
 8     }
 9 
10     //把除1以外的页堆在右边
11     while(--len){
12         setpost(pages[len]);
13     }
14 }());

好了,现在看起来仅管还是很丑,但是至少已经符合我预期的样子了。在这里我把第一页已外的页面全部摆到了屏幕的右边,你看不到它们。这样做的目的是要模拟手机上的翻页效果。接下来,就要实现这个非常令人期待的滑动翻页效果。现在该javascript发挥威力的时候了。这是一个简单的应用,我尽量把所有的js写在core.js中,并采用最普通的函数式编程。


 1 //初始化
 2 ;(function(){
 3     var pages = document.querySelectorAll('li');
 4     var width = 320;
 5     var len = pages.length;
 6     var setpost = function(element){
 7         element.style.transform = 'translate3d('+width+'px, 0, 0)';
 8     }
 9 
10     //把除1以外的页堆在右边
11     while(--len){
12         setpost(pages[len]);
13     }
14 }());
15 
16 //控制逻辑
17 ;(function(){
18     //这里直接使用了新的api,因为移动应用可以这样任性。
19     var pages = document.querySelectorAll('li');
20     //左右翻页按钮
21     var left = document.querySelector('.left');
22     var right = document.querySelector('.right');
23     //取得所有的子页面
24     var pagesLen = pages.length-1;
25 
26     //标记当前页面
27     var currIndex = 0;
28 
29     //移动页面
30     var move = function(index,pos){
31         var width = 320 * pos;
32         var page = pages[index];
33         page.style.transform = 'translate3d('+width+'px, 0, 0)';
34     }
35 
36     //向左翻页
37     var toLeft = function(){
38 
39         if(currIndex!==pagesLen){
40             move(currIndex,-1);
41             move(++currIndex,0);
42         } 
43     }
44 
45     //向右翻页
46     var toRight = function(){
47         if(currIndex!==0){
48             move(currIndex,1);
49             move(--currIndex,0);
50         }
51     }
52 
53     //监听动作
54     left.onclick = function(){
55         toLeft();
56     }
57 
58     right.onclick = function(){
59         toRight();
60     }
61 
62 }())

现在我们的程序可以左右翻页了,不过除了页码发生了变化之外,用户好像感觉不到有翻页的效果。左右翻页按钮的作用与我们期望的效果不一致,所以初始化时,把页面堆在右边其实是不太好的,改为左边会更好一些。嗯,还要继续完善。


 1 //初始化
 2 ;(function(){
 3     var pages = document.querySelectorAll('li');
 4     var width = 320;
 5     var len = pages.length;
 6     var setpost = function(element){
 7         element.style.transform = 'translate3d(-'+width+'px, 0, 0)';
 8     }
 9 
10     //把除1以外的页堆在左边
11     while(--len){
12         setpost(pages[len]);
13     }
14 }());
15 
16 //控制逻辑
17 ;(function(){
18     //这里直接使用了新的api,因为移动应用可以这样任性。
19     var pages = document.querySelectorAll('li');
20     //左右翻页按钮
21     var left = document.querySelector('.left');
22     var right = document.querySelector('.right');
23     //取得所有的子页面
24     var pagesLen = pages.length-1;
25 
26     //标记当前页面
27     var currIndex = 0;
28 
29     //移动页面
30     var move = function(index,pos){
31         var width = 320 * pos;
32         var page = pages[index];
33         page.style.transform = 'translate3d('+width+'px, 0, 0)';
34         page.style.transitionDuration = '300ms';
35     }
36 
37     //上一页
38     var toLeft = function(){
39         if(currIndex >0){
40             move(currIndex,-1);
41             move(--currIndex,0);
42         } 
43     }
44 
45     //下一页
46     var toRight = function(){
47         if(currIndex < pagesLen){
48             move(currIndex,1);
49             move(++currIndex,0);
50         }
51     }
52 
53     //监听动作
54     left.onclick = function(){
55         toLeft();
56     }
57 
58     right.onclick = function(){
59         toRight();
60     }
61 
62 }())

现在终于看起来像是在翻页的样子了,不过呢,我们在手机上操作的时候,是可以滑动翻页的,这个效果自然也要支持才行。我们先在pc上用鼠标拖动来模拟这一个过程,等逻辑跑通后,再加入触摸事件即可。

 

继续下一步之前,我们先小结一下:

首先在初始化代码时,顺道把所有不可见的页面全部堆叠到左边,放在左边的原因是因为我们习惯右边的按钮作为下一页,所以这样摆放,实现起来最简单,我当然要选择最有利于我编码的方式来摆放啦。其次呢,每一次翻页,其实都要移动两个页面。拿点击下一页按钮来说,首先要把当前页移动到不可见的屏幕右边,然后把上一页移到屏幕中间来。上一页的过程正好与之相反。我们发现,点击翻页和滑动翻页,其实都会调用相同的功能。所以在这里可先抽出公共方法,方便代码复用。

接下来,我们实现鼠标拖动翻页的效果。


 1 //初始化
 2 ;(function(){
 3     var pages = document.querySelectorAll('li');
 4     var width = 320;
 5     var len = pages.length;
 6     var setpost = function(element){
 7         element.style.transform = 'translate3d(-'+width+'px, 0, 0)';
 8     }
 9 
10     //把除1以外的页堆在左边
11     while(--len){
12         setpost(pages[len]);
13     }
14 }());
15 
16 //控制逻辑
17 ;(function(){
18     //这里直接使用了新的api,因为移动应用可以这样任性。
19     var pages = document.querySelectorAll('li');
20     //左右翻页按钮
21     var left = document.querySelector('.left');
22     var right = document.querySelector('.right');
23     //取得所有的子页面
24     var pagesLen = pages.length-1;
25     //屏宽
26     var screenWidth = 320;
27 
28     //标记当前页面
29     var currIndex = 0;
30 
31     //标记是否触发滑动
32     var isTouch = false;
33     //记录当前位置
34     var axis = {
35         x:0,
36         y:0
37     }
38 
39     //移动页面
40     var move = function(index,width,time){
41         var page = pages[index];
42         page.style.transform = 'translate3d('+width+'px, 0, 0)';
43         page.style.transitionDuration = time+'ms';
44     }
45 
46     //上一页
47     var toLeft = function(){
48         if(currIndex >0){
49             move(currIndex,-screenWidth,300);
50             move(--currIndex,0,300);
51         } 
52     }
53 
54     //下一页
55     var toRight = function(){
56         if(currIndex < pagesLen){
57             move(currIndex,screenWidth,300);
58             move(++currIndex,0,300);
59         }
60     }
61 
62     //监听动作
63     left.onclick = function(){
64         toLeft();
65     }
66 
67     right.onclick = function(){
68         toRight();
69     }
70 
71     document.addEventListener('mousedown',function(e){
72         isTouch = true;
73         axis.x = e.clientX;
74         axis.y = e.clientY;
75     });
76 
77     document.addEventListener('mousemove',function(e){
78         if(isTouch){
79             var distance = e.clientX - axis.x;
80             if(distance>0){
81                 //next
82                 //此时需要看到实时移动效果,所以时间为0
83                 move(currIndex,distance,0);
84                 //当前页与上一页之间总是相差一个屏宽
85                 move(currIndex+1,distance-screenWidth,0);
86             }else{
87                 //prev
88                 move(currIndex,distance,0);
89                 move(currIndex-1,screenWidth+distance,0);
90 
91             }
92         }
93     });
94 
95     document.addEventListener('mouseup',function(e){
96         isTouch = false;
97     });
98 
99 }())

这一步我们已经实现了拖动滑页效果,但是感觉怪怪的,对比一下手机上的滑动翻页效果发现,真机上只要我们滑动一定距离之后,页面就自动翻过去了,而不是要我们从一边一直滑到另一边,这样也太不实际了,而且如果我们只滑了一点距离,那么页面会自动归位,也就是常说的反弹效果。要实现这些也不难,我们继续完善代码。


  1 //初始化
  2 ;(function(){
  3     var pages = document.querySelectorAll('li');
  4     var width = 320;
  5     var len = pages.length;
  6     var setpost = function(element){
  7         element.style.transform = 'translate3d(-'+width+'px, 0, 0)';
  8     }
  9 
 10     //把除1以外的页堆在左边
 11     while(--len){
 12         setpost(pages[len]);
 13     }
 14 }());
 15 
 16 //控制逻辑
 17 ;(function(){
 18     //这里直接使用了新的api,因为移动应用可以这样任性。
 19     var pages = document.querySelectorAll('li');
 20     //左右翻页按钮
 21     var left = document.querySelector('.left');
 22     var right = document.querySelector('.right');
 23     //取得所有的子页面
 24     var pagesLen = pages.length-1;
 25     //屏宽
 26     var screenWidth = 320;
 27     //反弹时间
 28     var time = 300;
 29     //滑动距离
 30     var distance=0;
 31     //标记当前页面
 32     var currIndex = 0;
 33 
 34     //标记是否触发滑动
 35     var isTouch = false;
 36     //记录当前位置
 37     var axis = {
 38         x:0,
 39         y:0
 40     }
 41 
 42     //移动页面
 43     var move = function(index,width,time){
 44         var page = pages[index];
 45         page.style.transform = 'translate3d('+width+'px, 0, 0)';
 46         page.style.transitionDuration = time+'ms';
 47     }
 48 
 49     //上一页
 50     var toLeft = function(){
 51         if(currIndex >0){
 52             move(currIndex,-screenWidth,time);
 53             move(--currIndex,0,time);
 54         } 
 55     }
 56 
 57     //下一页
 58     var toRight = function(){
 59         if(currIndex < pagesLen){
 60             move(currIndex,screenWidth,time);
 61             move(++currIndex,0,time);
 62         }
 63     }
 64 
 65     //监听动作
 66     //prev
 67     left.onclick = function(){
 68         toLeft();
 69     }
 70     //next
 71     right.onclick = function(){
 72         toRight();
 73     }
 74 
 75     document.addEventListener('mousedown',function(e){
 76         isTouch = true;
 77         axis.x = e.clientX;
 78         axis.y = e.clientY;
 79     });
 80 
 81     document.addEventListener('mousemove',function(e){
 82         if(isTouch){
 83             distance = e.clientX - axis.x;
 84             if(distance>0){
 85                 //next
 86                 if(currIndex<pagesLen){
 87                     //此时需要看到实时移动效果,所以时间为0
 88                     move(currIndex,distance,0);
 89                     //当前页与上一页之间总是相差一个屏宽
 90                     move(currIndex+1,distance-screenWidth,0);
 91                 }
 92             }else{
 93                 if(currIndex>0){
 94                     //prev
 95                     move(currIndex,distance,0);
 96                     move(currIndex-1,screenWidth+distance,0);
 97                 }
 98             }
 99         }
100     });
101 
102     document.addEventListener('mouseup',function(e){
103         isTouch = false;
104         //反弹条件
105         var band = Math.ceil(screenWidth * 0.3);
106         //next
107         if(distance >0 && currIndex < pagesLen){
108             if(distance > band){
109                 toRight();
110             }else{
111                 //滑动距离太小,页面反弹
112                 move(currIndex,0,time);
113                 move(currIndex+1,-screenWidth,time);
114             }
115             return;
116         }
117         //prev
118         if(distance < 0 && currIndex > 0){
119             if(-distance > band){
120                 toLeft();
121             }else{
122                 //反弹
123                 move(currIndex,0,time);
124                 move(currIndex-1,screenWidth,time);
125             }
126         }
127     });
128 
129 }())

 最后发现有一点小问题,滑动之后再点翻页按钮,乱套了。仔细分析之后,找出了问题所在,松手时的移动距离不应该用滑动时的最后距离,所以修复很容易。


  1 //初始化
  2 ;(function(){
  3     var pages = document.querySelectorAll('li');
  4     var width = 320;
  5     var len = pages.length;
  6     var setpost = function(element){
  7         element.style.transform = 'translate3d(-'+width+'px, 0, 0)';
  8     }
  9 
 10     //把除1以外的页堆在左边
 11     while(--len){
 12         setpost(pages[len]);
 13     }
 14 }());
 15 
 16 //控制逻辑
 17 ;(function(){
 18     //获取所有页面
 19     var pages = document.querySelectorAll('li');
 20     //左右翻页按钮
 21     var left = document.querySelector('.left');
 22     var right = document.querySelector('.right');
 23     //取得所有的子页面
 24     var pagesLen = pages.length-1;
 25     //屏宽
 26     var screenWidth = 320;
 27     //反弹时间
 28     var time = 300;
 29  
 30     //标记当前页面
 31     var currIndex = 0;
 32 
 33     //标记是否触发滑动
 34     var isTouch = false;
 35     //记录当前位置
 36     var axis = {
 37         x:0,
 38         y:0
 39     }
 40 
 41     //移动页面
 42     var move = function(index,width,time){
 43         var page = pages[index];
 44         page.style.transform = 'translate3d('+width+'px, 0, 0)';
 45         page.style.transitionDuration = time+'ms';
 46     }
 47 
 48     //上一页
 49     var toLeft = function(){
 50         if(currIndex >0){
 51             move(currIndex,-screenWidth,time);
 52             move(--currIndex,0,time);
 53         } 
 54     }
 55 
 56     //下一页
 57     var toRight = function(){
 58         if(currIndex < pagesLen){
 59             move(currIndex,screenWidth,time);
 60             move(++currIndex,0,time);
 61         }
 62     }
 63 
 64     //监听动作
 65     //prev
 66     left.onclick = function(){
 67         toLeft();
 68     }
 69     //next
 70     right.onclick = function(){
 71         toRight();
 72     }
 73 
 74     document.addEventListener('mousedown',function(e){
 75         isTouch = true;
 76         axis.x = e.clientX;
 77         axis.y = e.clientY;
 78     });
 79 
 80     document.addEventListener('mousemove',function(e){
 81         if(isTouch){
 82             //滑动距离
 83             var distance = e.clientX - axis.x;
 84             if(distance>0){
 85                 //next
 86                 if(currIndex<pagesLen){
 87                     //此时需要看到实时移动效果,所以时间为0
 88                     move(currIndex,distance,0);
 89                     //当前页与上一页之间总是相差一个屏宽
 90                     move(currIndex+1,distance-screenWidth,0);
 91                 }
 92             }else{
 93                 if(currIndex>0){
 94                     //prev
 95                     move(currIndex,distance,0);
 96                     move(currIndex-1,screenWidth+distance,0);
 97                 }
 98             }
 99         }
100     });
101 
102     document.addEventListener('mouseup',function(e){
103         //松手时的移动距离
104         var distance = e.clientX - axis.x;
105         //反弹条件
106         var band = Math.ceil(screenWidth * 0.3);
107         isTouch = false;
108         //next
109         if(distance >0 && currIndex < pagesLen){
110             if(distance > band){
111                 toRight();
112             }else{
113                 //滑动距离太小,页面反弹
114                 move(currIndex,0,time);
115                 move(currIndex+1,-screenWidth,time);
116             }
117             return;
118         }
119         //prev
120         if(distance < 0 && currIndex > 0){
121             if(-distance > band){
122                 toLeft();
123             }else{
124                 //反弹
125                 move(currIndex,0,time);
126                 move(currIndex-1,screenWidth,time);
127             }
128         }
129     });
130 
131 }())

到此,这个简易的移动应用就建好了。发现这其实只是搭好了一个架子,里边还有很多内容可以填。比如,给每页加点背景和文字,让页面看起来更加丰满,给标题栏加点工具图标,让它看起来更像是一个原生的apk程序。当我们双击或长按页面空白区域的时候,自动隐藏或显示翻页按钮,增加对更多浏览器的支持,增加对移动设备的支持........

可以发挥的地方太多太多了,锦上添花的事就只好交给各位了。

一步一步做下来,收获了些什么呢?总结一下:

首先要有一个清晰的思路,先确定要实现什么功能,在脑海里有一个整的印象。把UI先建起来,这一步很容易实现,在此基础上,我们就可以看到,有哪些功能需要js去做,哪些效果需要css去做。先易后难。先整体后局部。在做的过程中,一步一步的完善,扩展,优化。一开始就想着要多完美,多优化,结果只是不断的否定自己的想法。不要怕出错,前面的演示中,我们发现,每一步都有些小错误,但是只要我们的整体思路是符合预期的,修正起来就会很快,这个修错的过程,也是一次学习的机地,总结的多了,以后就可以少出错,少被坑。

效果图:

加点内容,是不是立马显得高大上了呀!

源码打包下载:https://github.com/bjtqti/swipe.git

本文系原创,如果喜欢就砸个赞吧!

Tag标签: 电子书   效果  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规