Merge pull request #6 from wechatui/develop

update
wechatui · Nov 6, 2015 · 0648c6e · 0648c6e
2 parents 711be93 + 8d0b371
commit 0648c6e
Show file tree

Hide file tree

Showing 27 changed files with 673 additions and 5,335 deletions.
diff --git a/README.md b/README.md
@@ -12,11 +12,27 @@
 
 ```html
 <div class="swiper">
-    <div class="item item1">
-        <h1 class="bear" toggle-class="slide_in">bear</h1>
+    <div class="item">
+        <h2 class="title fadeInUp animated">它无孔不入</h2>
     </div>
-    <div class="item item2">
-        <h1 class="hehe" toggle-class="slide_in">kiki</h1>
+    <div class="item">
+        <h2 class="title fadeInUp animated">你无处可藏</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">不是它可恶</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">而是它不懂你</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">我们试图</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">做些改变</h2>
     </div>
 </div>
 <script src="../swiper.js"></script>
@@ -62,6 +78,8 @@
 
 - `direction`：String，滑动方向，默认值`vertical`；横向滑动时为`horizontal`
 
+- `activeClass`: String，当前屏激活时添加的类名；默认值`active`
+
 - `threshold`：Number，滑动距离阀值，默认值`50`，当按住屏幕滑动超过此距离，松开手时，自动滑到下一屏，否则不滑动
 
 - `duration`：Number，滑屏动画时间，单位`ms`，默认值`300`；数值越小，滑动越快，越刺激
@@ -74,45 +92,21 @@
 - `swiped`：滑动**结束时**，触发`swiped`事件，回调函数传入两个参数，分别是上一屏和当前屏索引，从`0`算起。举例，从第一屏滑动到第二屏结束时：
 
 ```javascript
-    var swiper = new Siper();
+    var swiper = new Swiper();
     swiper.on('swiped', function(prev, current){
         console.log('上一屏：', prev); // 0
         console.log('当前屏：', current); // 1
     });
 ```
 
-###HTML属性
-
-- toggle-class
-
-通常，制作此类页面，都是滑动时，对某些元素添加或者移除某些`class`，因此`swiper.js`支持在需要切换`class`的元素中，预先写入`toggle-class`属性。当滑动到当前屏时，自动查找拥有`toggle-class`属性的元素，并且为之添加上`toggle-class`的值，同时对上一屏中，拥有`toggle-class`属性的元素，移除`toggle-class`的值。如果需要添加或移除多个`class`，则以空格分隔。
+### 方法
 
-- data-delay
+- `next`: 主动滑动到下一屏。
 
-添加class的延时时间，单位`ms`。
-
-举例：
-
-```html
-<div class="swiper">
-    <div class="item item1">
-        <!-- 当出现第一屏时，自动为以下元素添加“slide_in”类，当滑动到下一屏时，自动移除 -->
-        <h1 class="bear" toggle-class="slide_in">bear</h1>
-        <!-- 延时800ms添加class -->
-        <h2 class="bear" data-delay="800" toggle-class="slide_in">jf</h2>
-    </div>
-    <div class="item item2">
-        <!-- 同上 -->
-        <h1 class="hehe" toggle-class="slide_in">kiki</h1>
-    </div>
-</div>
 ```
-
-##体验
-
-![](http://wechatui.github.io/swiper/images/example.jpg)
-
-![](http://wechatui.github.io/swiper/images/example2.jpg)
+    var swiper = new Swiper();
+    swiper.next();
+```
 
 ##License
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "iswiper",
   "description": "为移动端而生的滑动框架，无依赖，轻盈小巧，性能极致",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "wechat ui team",
   "keywords": [
     "iswiper",

diff --git a/dist/example/0.jpg b/dist/example/0.jpg
diff --git a/dist/example/1.jpg b/dist/example/1.jpg
diff --git a/dist/example/2.jpg b/dist/example/2.jpg
diff --git a/dist/example/3.jpg b/dist/example/3.jpg
diff --git a/dist/example/example.css b/dist/example/example.css
@@ -7,56 +7,59 @@ body {
     height: 100%;
     overflow: hidden;
 }
-.swiper {
+.container{
     height: 100%;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
+    background-color: #efeff4;
 }
-.item {
-    height: 100%;
-    background-position: center center;
-    background-size: cover;
-    position: relative;
-    overflow: hidden;
-    float: left;
-}
-.item .animated{
-    display: block !important;
+.item{
+    color: #ffffff;
+    background-color: #000000;
 }
-
-.item .title{
+.title{
+    margin-top: 50%;
     text-align: center;
-    display: none;
-    position: absolute;
-    top: 50%;
-    margin-top: -100px;
-    width: 100%;
 }
 
-.item .signature{
-    display: none;
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    text-align: center;
+/**
+ * copy from animate.css
+ * https://daneden.github.io/animate.css
+ */
+
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
 }
+@-webkit-keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
 
-.item .signature2{
-    display: none;
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    margin-top: 50px;
-    text-align: center;
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
 }
 
-.item1{
-    background: #576477;
-    color: #ffffff;
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
 }
-.item2{
-    background: #000000;
-    color: #ffffff;
+
+.fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
 }
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -3,28 +3,40 @@
 <head lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-    <title>albums</title>
-    <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css"/>
+    <title>无孔不入</title>
+    <link rel="stylesheet" href="../swiper.css"/>
     <link rel="stylesheet" href="example.css"/>
 </head>
 <body>
-
+<div class="container">
     <div class="swiper">
-        <div class="item item1">
-            <h1 class="title" toggle-class="bounceInLeft animated">i am bear</h1>
-            <p class="signature" toggle-class="bounceInLeft animated">bear is x</p>
-            <p class="signature2" toggle-class="lightSpeedIn animated">x is bear</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">它无孔不入</h2>
         </div>
-        <div class="item item2">
-            <h1 class="title" toggle-class="bounceInRight animated">i am jf</h1>
-            <p class="signature" toggle-class="bounceInLeft animated">hello</p>
-            <p class="signature2" toggle-class="lightSpeedIn animated">word</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">你无处可藏</h2>
+        </div>
+
+        <div class="item">
+            <h2 class="title fadeInUp animated">不是它可恶</h2>
+        </div>
+
+        <div class="item">
+            <h2 class="title fadeInUp animated">而是它不懂你</h2>
+        </div>
+
+        <div class="item">
+            <h2 class="title fadeInUp animated">我们试图</h2>
         </div>
-    </div>
 
-    <script src="../swiper.js"></script>
-    <script>
-        var swiper = new Swiper({});
-    </script>
+        <div class="item">
+            <h2 class="title fadeInUp animated">做些改变</h2>
+        </div>
+    </div>
+</div>
+<script src="../swiper.js"></script>
+<script>
+    var swiper = new Swiper();
+</script>
 </body>
 </html>
diff --git a/dist/example/index2.html b/dist/example/index2.html