update -v 2.1

lipten · Mar 23, 2017 · 1c5df60 · 1c5df60
1 parent 9d20ae8
commit 1c5df60
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 54 deletions.
diff --git a/demo.html b/demo.html
@@ -9,27 +9,21 @@
     <link rel="stylesheet" type="text/css" href="slidePage.css">
     <link rel="stylesheet" type="text/css" href="page-animation.css">
     <style type="text/css">
-
         html, body {
             margin: 0;
             width: 100%;
             height: 100%;
             font-family: arial;
             text-align: center;
         }
-
         body {
             margin: 0;
             padding: 0;
             background: #000;
         }
-
         ul {
             list-style: none;
         }
-
-
-
         .prev-page,.next-page{
             display: block;
             width: 25px;
@@ -44,7 +38,6 @@
             color: #666;
             text-align:center;
         }
-
         .prev-page{
             top: 0;
         }
@@ -93,12 +86,10 @@
         .pagination a.active:after{
             background: rgba(255,255,255,.5);
         }
-
         .item h2{
             margin:0;
             padding:20px 0;
         }
-
         .play{
             display: block;
             position: absolute;
@@ -124,7 +115,6 @@
         .play:active{
             background-color: rgb(141, 60, 50);
         }
-
         .goto{
             display: block;
             position: absolute;
@@ -150,31 +140,24 @@
         .goto:active{
             background-color: rgb(31, 79, 134);
         }
-
         .item1 {
             background-color: #99CC33;
         }
-
         .item2 {
             background-color: #99CC66;
         }
-
         .item3 {
             background-color: #99CCCC;
         }
-
         .item4 {
             background-color: #CCCC33;
         }
-
         .item5 {
             background-color: #CCCC99;
         }
-
         .item6 {
             background-color: #CCCC66;
         }
-
         .item1 .step1 {
             position: absolute;
             top: 100px;
@@ -184,9 +167,7 @@
             height: 100px;
             background-color: rgb(178, 116, 57);
             border-radius: 50%;
-
         }
-
         .item1 .step2 {
             position: absolute;
             bottom: 100px;
@@ -196,7 +177,6 @@
             height: 100px;
             background-color: rgb(116, 178, 9);
         }
-
         .item2 .step1 {
             position: absolute;
             top: 100px;
@@ -207,7 +187,6 @@
             background-color: rgb(82, 110, 178);
             border-radius: 50%;
         }
-
         .item2 .step3 {
             position: absolute;
             bottom: 60px;
@@ -217,7 +196,6 @@
             height: 150px;
             background-color: rgb(178, 79, 54);
         }
-
         .item2 .step2 {
             position: absolute;
             top: 100px;
@@ -227,7 +205,6 @@
             height: 100px;
             background-color: rgb(116, 178, 9);
         }
-
         .item3 .step1 {
             position: absolute;
             top: 100px;
@@ -238,8 +215,6 @@
             background-color: rgb(178, 79, 65);
             border-radius: 50%;
         }
-
-
         .item3 .step2 {
             position: absolute;
             bottom: 100px;
@@ -249,19 +224,15 @@
             height: 100px;
             background-color: rgb(52, 178, 89);
         }
-
-
         .item4 .container{
             padding-bottom: 20px;
         }
-
         .item4 ul{
             margin:0;
             padding:0;
             width:90%;
             margin-left: 5%;
         }
-
         .item4 ul li{
             width:100%;
             padding:10px;
@@ -271,11 +242,6 @@
             border-bottom:1px solid #ccc;
             background: rgba(255,255,255,.5);
         }
-
-
-
-
-
         .item5 .step2 {
             position: absolute;
             top: 100px;
@@ -285,7 +251,6 @@
             height: 100px;
             background-color: rgb(178, 159, 44);
         }
-
         .item5 .step1 {
             position: absolute;
             bottom: 100px;
@@ -295,7 +260,6 @@
             height: 100px;
             background-color: rgb(178, 72, 91);
         }
-
         .item5 .step3 {
             position: absolute;
             bottom: 100px;
@@ -306,9 +270,6 @@
             border-radius: 50%;
             background-color: rgb(93, 163, 178);
         }
-
-
-
     </style>
 
 </head>
@@ -395,8 +356,7 @@ <h2>Page6 - 跳转</h2>
     </nav>
 </div>
 <script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
-<script type="text/javascript" src="slidePage-touch.js"></script>
-<script type="text/javascript" src="slidePage.js"></script>
+<script type="text/javascript" src="slidePage.min.js"></script>
 
 <script type="text/javascript">
     $('#pagination').find('a').eq(0).addClass('active')
@@ -413,14 +373,11 @@ <h2>Page6 - 跳转</h2>
             }
         },
         after:function(index,direction,target){
-
         },
         'useAnimation': true,
         'refresh': true,
         'speed': false,
     });
-
-
 </script>
 </body>
-</html>
+</html>
diff --git a/slidePage-touch.js b/slidePage-touch.js
@@ -162,4 +162,4 @@
         'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
         $.fn[eventName] = function(callback){ return this.on(eventName, callback) }
     })
-})($)
+})($)
diff --git a/slidePage.js b/slidePage.js
@@ -18,7 +18,8 @@
     var pageCount = $(opt.pageContainer).length
     var windowH = window.innerHeight
     var direction=''
-
+    var removedIndex=''
+    var removedPages={}
     window.slidePage = {
         'init': function(option,callback) {
             $.extend(opt, option);
@@ -70,7 +71,37 @@
         'fire':function(index){
             fireAnimate(index)
         },
-
+        'remove':function(index, callback){
+          if (!removedIndex.match(index)) {
+            pageCount--
+            if(keyIndex > index){
+              keyIndex--
+            }
+            removedIndex = index + ',' + removedIndex
+            removedPages[index] = $(opt.pageContainer).eq(index-1).remove()
+            callback&&callback()
+          }
+        },
+        'recover':function(index, callback){
+          if (removedIndex.match(index)) {
+            removedIndex = removedIndex.replace(index + ',', '');
+            if (index >= pageCount) {
+                $(opt.pageContainer).eq(pageCount-1).after(removedPages[index]);
+            } else {
+                $(opt.pageContainer).eq(index-1).before(removedPages[index]);
+            }
+            if(keyIndex > index){
+              keyIndex++
+            }
+            pageCount++
+            if (direction == 'prev') {
+              obj.prevSlide(removedPages[index])
+            } else {
+              obj.prevSlide(removedPages[index])
+            }
+            callback&&callback()
+          }
+        },
         canNext:true,
         canPrev:true,
         isScroll:false,//-- 移动端控制滚动或滑动
@@ -143,8 +174,8 @@
         } else {
             obj.showSlide(item);
         }
-        opt.before(item.index()+1,direction,item.index()+2);
         keyindex = $(opt.pageContainer).index(item)
+        opt.before(item.index()+1,direction,item.index()+2);
         pageActive()
     }
     //-- 滚动上一屏执行过程
@@ -164,8 +195,6 @@
     }
     //-- 初始化元素
     function initDom(opt) {
-        //-- 这里在移动端下有个奇怪的问题：如果设置了speed参数，也就是当js设置了下面这个css属性，那么这个css动画的时间曲线会变成匀速过渡（linear）,所以speed只能默认为false暂时避免这问题。
-        //-- 如果有大神知道怎么解决请fork或联系我qq：296183464 谢谢。
         if (!!opt.speed){
             $(opt.pageContainer).css({'transition-duration':opt.speed+'ms','-webkit-transition-duration':opt.speed+'ms'});
         }
@@ -287,10 +316,16 @@
 
         //-- 监听css过渡结束的事件
         $(opt.pageContainer).on('transitionend webkitTransitionEnd', function(event) {
+          // 判断是否有页面被remove
+          var removedLength = removedIndex.split(',').length
             if(after){
+              if (removedLength>1) {
+                opt.after(direction=='next'?keyIndex+1:keyIndex+2,direction,keyIndex+2);
+              } else {
                 opt.after(direction=='next'?keyIndex:keyIndex+2,direction,keyIndex+1);
-                after=false;
+              }
+              after=false;
             }
         })
     }
-})($);
+})($);
-Original file line number
+Diff line change
@@ Expand Up / @@ -162,4 +162,4 @@ @@
             'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
             $.fn[eventName] = function(callback){ return this.on(eventName, callback) }
         })
-    })($)
+    })($)