├── .gitignore ├── demo ├── images │ ├── 01.jpg │ ├── 01_1.png │ ├── 01_2.png │ ├── 01_3.png │ ├── 02.jpg │ ├── 02_1.png │ ├── 02_2.png │ ├── 02_3.png │ ├── 02_4.png │ ├── 02_5.png │ ├── 03.jpg │ ├── 03_1.png │ ├── 03_2.png │ ├── 03_3.png │ ├── 03_4.png │ ├── 03_5.png │ ├── 03_6.png │ ├── 03_7.png │ ├── 03_8.png │ ├── 03_9.png │ ├── 04.jpg │ ├── 04_1.png │ ├── 04_2.png │ ├── 04_3.png │ ├── 04_4.png │ ├── 04_5.png │ ├── 04_6.png │ ├── 04_7.png │ ├── 04_8.png │ ├── 04_9.png │ ├── 05_1.png │ ├── 05_2.png │ ├── 05_3.png │ ├── 05_4.png │ ├── 05_5.png │ ├── 05_6.png │ ├── 05_7.png │ ├── 05_8.png │ ├── 05_9.png │ ├── 06_1.png │ ├── 06_2.png │ ├── 06_3.png │ ├── 06_4.png │ ├── 06_5.png │ ├── 06_6.png │ ├── 06_7.png │ ├── 06_8.png │ ├── 06_9.png │ ├── 07_1.png │ ├── 07_2.png │ ├── 07_3.png │ ├── 07_4.png │ ├── back.png │ ├── demo.gif │ ├── f2_1.jpg │ ├── f2_2.png │ ├── f2_3.png │ ├── f2_4.jpg │ ├── f2_5.png │ ├── f3_1.jpg │ ├── f3_2.png │ ├── f3_3.jpg │ ├── f3_4.png │ ├── f4_1.jpg │ ├── f4_2.png │ ├── f5_1.jpg │ ├── f5_2.png │ ├── f5_3.jpg │ ├── f5_4.png │ ├── f6_1.png │ ├── f6_2.jpg │ ├── f6_3.jpg │ ├── f6_4.jpg │ ├── f6_5.jpg │ ├── f6_6.png │ ├── yoga.gif │ ├── 03_10.png │ ├── 03_11.png │ ├── 03_12.png │ ├── arrow.png │ ├── back2.png │ ├── cover.jpg │ ├── share.png │ └── desktop │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ └── 5.jpg ├── music.html ├── reset.css ├── index.html ├── plugin.html ├── small.html └── yoga.html ├── gulpfile.js ├── package.json ├── LICENSE ├── dist ├── EasySlide.css ├── loader.js ├── effects.js ├── ppt.js └── EasySlide.js ├── src ├── EasySlide.css ├── loader.js ├── effects.js ├── ppt.js └── EasySlide.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *swp 3 | *.swp 4 | .gitCOMMIT_EDITMSG 5 | *.svn 6 | node_modules/* 7 | -------------------------------------------------------------------------------- /demo/images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/01.jpg -------------------------------------------------------------------------------- /demo/images/01_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/01_1.png -------------------------------------------------------------------------------- /demo/images/01_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/01_2.png -------------------------------------------------------------------------------- /demo/images/01_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/01_3.png -------------------------------------------------------------------------------- /demo/images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02.jpg -------------------------------------------------------------------------------- /demo/images/02_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02_1.png -------------------------------------------------------------------------------- /demo/images/02_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02_2.png -------------------------------------------------------------------------------- /demo/images/02_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02_3.png -------------------------------------------------------------------------------- /demo/images/02_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02_4.png -------------------------------------------------------------------------------- /demo/images/02_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/02_5.png -------------------------------------------------------------------------------- /demo/images/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03.jpg -------------------------------------------------------------------------------- /demo/images/03_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_1.png -------------------------------------------------------------------------------- /demo/images/03_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_2.png -------------------------------------------------------------------------------- /demo/images/03_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_3.png -------------------------------------------------------------------------------- /demo/images/03_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_4.png -------------------------------------------------------------------------------- /demo/images/03_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_5.png -------------------------------------------------------------------------------- /demo/images/03_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_6.png -------------------------------------------------------------------------------- /demo/images/03_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_7.png -------------------------------------------------------------------------------- /demo/images/03_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_8.png -------------------------------------------------------------------------------- /demo/images/03_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_9.png -------------------------------------------------------------------------------- /demo/images/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04.jpg -------------------------------------------------------------------------------- /demo/images/04_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_1.png -------------------------------------------------------------------------------- /demo/images/04_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_2.png -------------------------------------------------------------------------------- /demo/images/04_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_3.png -------------------------------------------------------------------------------- /demo/images/04_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_4.png -------------------------------------------------------------------------------- /demo/images/04_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_5.png -------------------------------------------------------------------------------- /demo/images/04_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_6.png -------------------------------------------------------------------------------- /demo/images/04_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_7.png -------------------------------------------------------------------------------- /demo/images/04_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_8.png -------------------------------------------------------------------------------- /demo/images/04_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/04_9.png -------------------------------------------------------------------------------- /demo/images/05_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_1.png -------------------------------------------------------------------------------- /demo/images/05_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_2.png -------------------------------------------------------------------------------- /demo/images/05_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_3.png -------------------------------------------------------------------------------- /demo/images/05_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_4.png -------------------------------------------------------------------------------- /demo/images/05_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_5.png -------------------------------------------------------------------------------- /demo/images/05_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_6.png -------------------------------------------------------------------------------- /demo/images/05_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_7.png -------------------------------------------------------------------------------- /demo/images/05_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_8.png -------------------------------------------------------------------------------- /demo/images/05_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/05_9.png -------------------------------------------------------------------------------- /demo/images/06_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_1.png -------------------------------------------------------------------------------- /demo/images/06_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_2.png -------------------------------------------------------------------------------- /demo/images/06_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_3.png -------------------------------------------------------------------------------- /demo/images/06_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_4.png -------------------------------------------------------------------------------- /demo/images/06_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_5.png -------------------------------------------------------------------------------- /demo/images/06_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_6.png -------------------------------------------------------------------------------- /demo/images/06_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_7.png -------------------------------------------------------------------------------- /demo/images/06_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_8.png -------------------------------------------------------------------------------- /demo/images/06_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/06_9.png -------------------------------------------------------------------------------- /demo/images/07_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/07_1.png -------------------------------------------------------------------------------- /demo/images/07_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/07_2.png -------------------------------------------------------------------------------- /demo/images/07_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/07_3.png -------------------------------------------------------------------------------- /demo/images/07_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/07_4.png -------------------------------------------------------------------------------- /demo/images/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/back.png -------------------------------------------------------------------------------- /demo/images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/demo.gif -------------------------------------------------------------------------------- /demo/images/f2_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f2_1.jpg -------------------------------------------------------------------------------- /demo/images/f2_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f2_2.png -------------------------------------------------------------------------------- /demo/images/f2_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f2_3.png -------------------------------------------------------------------------------- /demo/images/f2_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f2_4.jpg -------------------------------------------------------------------------------- /demo/images/f2_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f2_5.png -------------------------------------------------------------------------------- /demo/images/f3_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f3_1.jpg -------------------------------------------------------------------------------- /demo/images/f3_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f3_2.png -------------------------------------------------------------------------------- /demo/images/f3_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f3_3.jpg -------------------------------------------------------------------------------- /demo/images/f3_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f3_4.png -------------------------------------------------------------------------------- /demo/images/f4_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f4_1.jpg -------------------------------------------------------------------------------- /demo/images/f4_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f4_2.png -------------------------------------------------------------------------------- /demo/images/f5_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f5_1.jpg -------------------------------------------------------------------------------- /demo/images/f5_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f5_2.png -------------------------------------------------------------------------------- /demo/images/f5_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f5_3.jpg -------------------------------------------------------------------------------- /demo/images/f5_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f5_4.png -------------------------------------------------------------------------------- /demo/images/f6_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_1.png -------------------------------------------------------------------------------- /demo/images/f6_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_2.jpg -------------------------------------------------------------------------------- /demo/images/f6_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_3.jpg -------------------------------------------------------------------------------- /demo/images/f6_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_4.jpg -------------------------------------------------------------------------------- /demo/images/f6_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_5.jpg -------------------------------------------------------------------------------- /demo/images/f6_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/f6_6.png -------------------------------------------------------------------------------- /demo/images/yoga.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/yoga.gif -------------------------------------------------------------------------------- /demo/images/03_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_10.png -------------------------------------------------------------------------------- /demo/images/03_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_11.png -------------------------------------------------------------------------------- /demo/images/03_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/03_12.png -------------------------------------------------------------------------------- /demo/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/arrow.png -------------------------------------------------------------------------------- /demo/images/back2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/back2.png -------------------------------------------------------------------------------- /demo/images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/cover.jpg -------------------------------------------------------------------------------- /demo/images/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/share.png -------------------------------------------------------------------------------- /demo/images/desktop/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/desktop/1.jpg -------------------------------------------------------------------------------- /demo/images/desktop/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/desktop/2.jpg -------------------------------------------------------------------------------- /demo/images/desktop/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/desktop/3.jpg -------------------------------------------------------------------------------- /demo/images/desktop/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/desktop/4.jpg -------------------------------------------------------------------------------- /demo/images/desktop/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/EasySlide/HEAD/demo/images/desktop/5.jpg -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var minifyCss = require('gulp-minify-css'); 3 | var uglify = require('gulp-uglify'); 4 | 5 | gulp.task('css', function() { 6 | return gulp.src('src/*.css').pipe(minifyCss()).pipe(gulp.dest('dist')); 7 | }); 8 | 9 | gulp.task('js', function() { 10 | return gulp.src('src/*.js').pipe(uglify()).pipe(gulp.dest('dist')); 11 | }); 12 | 13 | gulp.task('default',['css','js']); 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "EasySlide", 3 | "version": "0.0.1", 4 | "author": [{ 5 | "name": "xiaojue", 6 | "email": "designsor@gmail.com", 7 | "url": "http://tuer.me/user/profile/designsor" 8 | }], 9 | "description": "mobile easy to build a slide or h5 animation page", 10 | "keywords": [ 11 | "slide", 12 | "ppt", 13 | "animation", 14 | "h5" 15 | ], 16 | "dependencies": { 17 | "gulp": "*" 18 | }, 19 | "devDependencies": { 20 | "gulp": "*", 21 | "gulp-uglify":"*", 22 | "gulp-minify-css":"*" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/xiaojue/EasySlide.git" 27 | }, 28 | "license": "MIT" 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 xiaojue 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /dist/EasySlide.css: -------------------------------------------------------------------------------- 1 | .EasySlide-warp{position:relative;overflow:hidden}.EasySlide-slides,.EasySlide-subppt-slide{position:absolute;top:0;left:0;width:100%}.EasySlide-slides{height:100%;overflow:hidden}.EasySlide-subppt-slide{-webkit-transition:-webkit-transform .5s ease;-webkit-transform-origin:0 0}.EasySlide-subppt-imgWrap{width:100%;overflow:hidden}.EasySlide-subppt-imgWrap>img{width:100%;box-sizing:border-box}.EasySlide-animate{opacity:0}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%,50%{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes pulse{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:0}30%,70%{opacity:1}50%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.1,1.1,1.1);opacity:1}}.flayer{display:none} -------------------------------------------------------------------------------- /dist/loader.js: -------------------------------------------------------------------------------- 1 | !function(e,t){function r(){this.resources={},this.audio={},this.video={}}var o=e.EasySlide,n=o.utils;r.prototype={constructor:r,getFilename:function(e){return e.slice(e.lastIndexOf("/")+1).replace(/\?.*$/,"").toLowerCase()},getExtName:function(e){return e.slice(e.lastIndexOf(".")+1,e.length).toLowerCase()},getCreateNode:function(e){var t={img:["jpg","jpeg","gif","png","bmp"]};for(var r in t)if(t.hasOwnProperty(r)&&t[r].indexOf(e)>-1)return r;return null},_getResourcesMap:function(e){var t=this;e.forEach(function(e){var r,o,n;if("object"==typeof e?(r=e.name,o=t.getExtName(e.path),n=e.path):(r=t.getFilename(e),o=t.getExtName(e),n=e),t.resources[r]={path:n,name:r,type:o,node:t.getCreateNode(o)},null===t.resources[r].node)throw new Error("load resource ext is not support"+o+","+n)})},_fetch:function(e,r){var o=e.path,i=e.node,s=t.createElement(i);"img"===i&&(s.onload=s.onerror=function(){n.remove(s),r()}),s.style.display="none",s.src=o,t.body.appendChild(s)},loader:function(e){function t(){n++,r.trigger("progress",[(n/o*100).toFixed(2)]),n===o&&r.trigger("loaded")}var r=this,o=0,n=0;this._getResourcesMap(e),o=Object.keys(this.resources).length;for(var i in this.resources)this.resources.hasOwnProperty(i)&&this._fetch(this.resources[i],t)}};var i=o.prototype.init;o.prototype.init=function(){r.call(this),i.call(this)},o.prototype=n.mixin(o.prototype,r.prototype)}(window,document); -------------------------------------------------------------------------------- /demo/music.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | EasySlide demo 9 | 10 | 11 | 12 | 17 | 18 | 19 |
20 |
21 |
22 | 音乐 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 45 | 46 | -------------------------------------------------------------------------------- /src/EasySlide.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @author fuqiang3@staff.sina.com.cn 3 | * @date 20170803 4 | * @fileoverview EasySlide 动画css和subppt样式 5 | */ 6 | 7 | .EasySlide-warp { 8 | position:relative; 9 | overflow:hidden; 10 | } 11 | .EasySlide-slides{ 12 | width:100%; 13 | height:100%; 14 | position:absolute; 15 | top:0; 16 | left:0; 17 | overflow:hidden; 18 | } 19 | 20 | 21 | .EasySlide-subppt-slide{ 22 | width:100%; 23 | position:absolute; 24 | top:0; 25 | left:0; 26 | -webkit-transition:-webkit-transform 0.5s ease; 27 | -webkit-transform-origin:0 0; 28 | } 29 | .EasySlide-subppt-imgWrap{ 30 | width:100%; 31 | overflow:hidden; 32 | } 33 | .EasySlide-subppt-imgWrap > img{ 34 | width:100%; 35 | box-sizing:border-box; 36 | } 37 | 38 | .EasySlide-animate{ 39 | opacity:0; 40 | } 41 | 42 | @-webkit-keyframes zoomIn{ 43 | 0%{ 44 | opacity: 0; 45 | -webkit-transform: scale3d(.3, .3, .3); 46 | transform:scale3d(.3, .3, .3); 47 | } 48 | 50%{opacity: 1;} 49 | 100%{opacity: 1;} 50 | } 51 | 52 | @-webkit-keyframes fadeIn{ 53 | 0%{opacity:0;} 54 | 100%{opacity:1;} 55 | } 56 | 57 | @-webkit-keyframes fadeOut{ 58 | 0%{opacity:1;} 59 | 100%{opacity:0;} 60 | } 61 | 62 | @-webkit-keyframes fadeInDown{ 63 | 0%{opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} 64 | 100%{opacity: 1;-webkit-transform: none;transform: none;} 65 | } 66 | 67 | @-webkit-keyframes fadeInUp{ 68 | 0%{opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} 69 | 100%{opacity: 1;-webkit-transform: none;transform: none;} 70 | } 71 | 72 | @-webkit-keyframes pulse{ 73 | 0%{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);opacity:0;} 74 | 30%{opacity:1;} 75 | 50%{-webkit-transform: scale3d(1.2, 1.2, 1.2);transform: scale3d(1.1, 1.1, 1.1);opacity:1;} 76 | 70%{opacity:1;} 77 | 100%{-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);opacity:0;} 78 | } 79 | .flayer{display:none;} 80 | -------------------------------------------------------------------------------- /dist/effects.js: -------------------------------------------------------------------------------- 1 | !function(t){var e=t.EasySlide,i=e.utils;i.mixin(e.animationEffects,{scale:function(t,e,s,n){n&&(t.style["-webkit-transition"]=this.transition);var a=parseInt(i.attr(t,"index"),10),r="translateZ(0) translate"+e+"("+s+"px)";this.curIndex!==a&&(r+=" scale(0.5)"),t.style["-webkit-transform"]=r},flip:function(t,e,s,n){n&&(t.style["-webkit-transition"]=this.transition);var a="X"===e?"Y":"X",r=parseInt(i.attr(t,"index"),10);t.style["-webkit-backface-visibility"]="hidden",t.style["-webkit-transform-style"]="preserve-3d",t.style.zIndex=r;var l=i.getByTagName("*",t),o=window.getComputedStyle(t,null)["transition-duration"];o=o?i.transitionDurationToMilliseconds(o):0,l.forEach(function(t){i.hasAttr(t,"scroll")&&i.hide(t)}),this.curIndex===r?(t.style.visibility="visible",t.style["-webkit-transform"]="rotate"+a+"(0deg) translateZ(0)"):(t.style.visibility="hidden",t.style["-webkit-transform"]="rotate"+a+"(180deg) translateZ(0)"),setTimeout(function(){l.forEach(function(t){i.hasAttr(t,"scroll")&&i.show(t)})},o)},rotate:function(t,e,s,n){n&&(t.style["-webkit-transition"]=this.transition);var a="X"===e?"Y":"X",r=parseInt(i.attr(t,"index"),10),l="X"===e?this.vW:this.vH;if(t.style["-webkit-backface-visibility"]="hidden",t.style["-webkit-transform-style"]="preserve-3d",t.style.position="absolute",this.wrapAll.style.webkitPerspective=4*l,r===this.curIndex)t.style.zIndex=1,t.style["-webkit-transform"]="rotate"+a+"(0deg) translateZ(0) scale(1)";else{var o=r===this.curIndex+1,d=this.curIndex===this.slidesLen-1&&0===r,y=o||d?1:-1;t.style.zIndex=0,t.style["-webkit-transform"]="rotate"+a+"("+90*y+"deg) translateZ("+.888*l/2+"px) translate"+e+"("+s+"px) scale(0.888)"}},card:function(t,e,s,n){n&&(t.style["-webkit-transition"]=this.transition);var a=parseInt(i.attr(t,"index"),10),r="translateZ(0) translate"+e+"("+s+"px)",l=window.getComputedStyle(t,null)["transition-duration"];l=l?i.transitionDurationToMilliseconds(l):0,t.style.position="absolute",a===this.curIndex?(t.style.zIndex=1,t.style["-webkit-transform"]=r):(t.style.zIndex=0,setTimeout(function(){t.style["-webkit-transform"]=r},l))}})}(window); -------------------------------------------------------------------------------- /dist/ppt.js: -------------------------------------------------------------------------------- 1 | !function(s,i){var t=s.EasySlide,e=t.utils,r=function(s){this.curIndex=0,this.width=s.width,this.height=s.height,this.init(s)};r.STATIC={slideCls:"EasySlide-subppt-slide",imgWrapCls:"EasySlide-subppt-imgWrap"},r.prototype={init:function(i){this.wrapDiv=e.$(i.wrapDiv),this.imgs=i.imgs,this.slidesLen=this.imgs.length,this.initSlides(this.wrapDiv),e.bind(s,"resize",this.resize.bind(this)),this.showCurSlide()},resize:function(){this.initSlides(this.wrapDiv);var s=this.floorvW.bind(this),i=e.getByClsName(r.STATIC.slideCls,this.wrapDiv);i.forEach(function(i){i.style.width=s(.6)+"px"}),this.showCurSlide()},setPos:function(s,i,t,e){i=i||0,t=t||0;var r="translate3d("+i+"px,"+t+"px,0)";e&&(r+=" scale3d("+e+","+e+",1)"),s.style["-webkit-transform"]=r},createSlide:function(s){var t=i.createElement("div");return t.className=r.STATIC.slideCls,e.attr(t,"subindex",s),t.style.width=this.floorvW(.6)+"px",t.innerHTML="
",this.wrapDiv.appendChild(t),t},floorvW:function(s){return Math.floor(this.vW*s)},showCurSlide:function(){function s(){var s=h.createSlide(h.curIndex);h.setPos.apply(h,[s].concat(d))}function i(){var s=h.createSlide(h.curIndex0?S:x);h.setPos.apply(h,[s].concat(l))}function n(){var s;s=h.createSlide(h.curIndex>1?w:1===h.curIndex?x:f),h.setPos.apply(h,[s].concat(v))}var h=this,c=h.floorvW.bind(this),d=[c(.2)],u=[c(.9),c(.05),.8],o=[h.vW+150,c(.1),.7],l=[-c(.38),c(.05),.8],v=[-h.vW-150,c(.1),.7],p=e.getByClsName(r.STATIC.slideCls,this.wrapDiv),x=this.slidesLen-1,f=this.slidesLen-2,I=this.curIndex+1,C=this.curIndex+2,S=this.curIndex-1,w=this.curIndex-2,P={hasCur:!1,hasPrev1:!1,hasPrev2:!1,hasNext1:!1,hasNext2:!1};p.forEach(function(s){function i(i){var t=[];for(var e in i)if(i[e]===!0){switch(e){case"hasCur":t=[s].concat(d);break;case"hasNext1":t=[s].concat(u);break;case"hasNext2":t=[s].concat(o);break;case"hasPrev1":t=[s].concat(l);break;case"hasPrev2":t=[s].concat(v)}break}h.setPos.apply(h,t)}var t=parseInt(e.attr(s,"subindex"),10),r=t===this.curIndex,a=t===I,n=this.curIndex===x&&0===t,c=t===C,p=this.curIndex===x&&1===t||this.curIndex===f&&0===t,b=t===S,y=0===this.curIndex&&t===x,m=t===w,g=0===this.curIndex&&t===f||1===this.curIndex&&t===x,N=r,T=a||n,D=c||p,W=b||y,k=m||g;i({hasCur:r,hasNext1:T,hasNext2:D,hasPrev1:W,hasPrev2:k}),P.hasCur=P.hasCur?P.hasCur:N,P.hasNext1=P.hasNext1?P.hasNext1:T,P.hasNext2=P.hasNext2?P.hasNext2:D,P.hasPrev1=P.hasPrev1?P.hasPrev1:W,P.hasPrev2=P.hasPrev2?P.hasPrev2:k}.bind(this));var b={hasCur:s,hasNext1:i,hasNext2:t,hasPrev1:a,hasPrev2:n};for(var y in P)P.hasOwnProperty(y)&&!P[y]&&b[y]()},move:function(s){for(var i=e.getByClsName(r.STATIC.slideCls,this.wrapDiv),t=0,a=i.length;a>t;t++){var n=parseInt(e.attr(i[t],"subindex"),10),h=1===s?this.curIndex-n:n-this.curIndex;if(h=h>0?h:h+this.slidesLen,2===h){e.remove(i[t]);break}}1===s?(this.curIndex++,this.curIndex>=this.slidesLen&&(this.curIndex=0)):(this.curIndex--,this.curIndex<0&&(this.curIndex=this.slidesLen-1)),this.showCurSlide()}},r.prototype.initSlides=t.prototype.initSlides,t.prototype.initSubPPT=function(s){function i(s,i){r.subppt[s]=new t.Subppt({width:r.vW,height:r.vH,wrapDiv:i.wrapDiv,imgs:i.imgs}),r.subpptNum.push(i.parentNum)}var r=this;s.forEach(function(s,r){var a=e.$(s.wrapDiv);if(a=e.contain(a,t.STATIC.flayerCls)){var n=e.$(e.attr(a,t.STATIC.flayerTriggerCls));e.bind(n,"click",function(){i(r,s)})}else i(r,s)})},t.Subppt=r}(window,document); -------------------------------------------------------------------------------- /src/loader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author designsor@gmail.com 3 | * @date 20150810 4 | * @fileoverview loader功能 5 | */ 6 | (function(win, doc) { 7 | 8 | var EasySlide = win.EasySlide; 9 | 10 | var utils = EasySlide.utils; 11 | 12 | function loader() { 13 | this.resources = {}; 14 | this.audio = {}; 15 | this.video = {}; 16 | } 17 | 18 | loader.prototype = { 19 | constructor: loader, 20 | getFilename: function(url) { 21 | return url.slice(url.lastIndexOf('/') + 1).replace(/\?.*$/, '').toLowerCase(); 22 | }, 23 | getExtName: function(url) { 24 | return url.slice(url.lastIndexOf('.') + 1, url.length).toLowerCase(); 25 | }, 26 | getCreateNode: function(ext) { 27 | var types = { 28 | img: ['jpg', 'jpeg', 'gif', 'png', 'bmp'] 29 | //,video: ['webm', 'mp4'], 30 | //audio: ['ogg', 'wav', 'mp3', 'aac'] 31 | }; 32 | for (var i in types) { 33 | if (types.hasOwnProperty(i) && types[i].indexOf(ext) > -1) { 34 | return i; 35 | } 36 | } 37 | return null; 38 | }, 39 | _getResourcesMap: function(resources) { 40 | var self = this; 41 | resources.forEach(function(resource) { 42 | var fileName, fileExt, filePath; 43 | if (typeof resource === 'object') { 44 | fileName = resource.name; 45 | fileExt = self.getExtName(resource.path); 46 | filePath = resource.path; 47 | } else { 48 | fileName = self.getFilename(resource); 49 | fileExt = self.getExtName(resource); 50 | filePath = resource; 51 | } 52 | self.resources[fileName] = { 53 | path: filePath, 54 | name: fileName, 55 | type: fileExt, 56 | node: self.getCreateNode(fileExt) 57 | }; 58 | if (self.resources[fileName].node === null) { 59 | throw new Error('load resource ext is not support' + fileExt + ',' + filePath); 60 | } 61 | }); 62 | }, 63 | _fetch: function(res, cb) { 64 | //var self = this, 65 | //name = res.name, 66 | var path = res.path, 67 | node = res.node; 68 | var Tag = doc.createElement(node); 69 | if (node === 'img') { 70 | Tag.onload = Tag.onerror = function() { 71 | utils.remove(Tag); 72 | cb(); 73 | }; 74 | } 75 | /* 76 | else { 77 | //TODO 加载音频视频功能在v2中开发 78 | utils.bind(Tag, 'canplaythrough', function() { 79 | if (node === 'video') { 80 | self.video[name] = Tag; 81 | } else { 82 | self.audio[name] = Tag; 83 | } 84 | cb(); 85 | }); 86 | } 87 | */ 88 | Tag.style.display = 'none'; 89 | Tag.src = path; 90 | doc.body.appendChild(Tag); 91 | }, 92 | loader: function(resources) { 93 | var self = this, 94 | resourceLen = 0, 95 | successCount = 0; 96 | 97 | this._getResourcesMap(resources); 98 | resourceLen = Object.keys(this.resources).length; 99 | 100 | function callback() { 101 | successCount++; 102 | //console.log(successCount,resourceLen); 103 | self.trigger('progress', [(successCount / resourceLen * 100).toFixed(2)]); 104 | if (successCount === resourceLen) { 105 | self.trigger('loaded'); 106 | } 107 | } 108 | for (var i in this.resources) { 109 | if (this.resources.hasOwnProperty(i)) { 110 | this._fetch(this.resources[i], callback); 111 | } 112 | } 113 | } 114 | }; 115 | 116 | var oldInit = EasySlide.prototype.init; 117 | 118 | EasySlide.prototype.init = function() { 119 | loader.call(this); 120 | oldInit.call(this); 121 | }; 122 | 123 | EasySlide.prototype = utils.mixin(EasySlide.prototype, loader.prototype); 124 | 125 | })(window, document); 126 | -------------------------------------------------------------------------------- /demo/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /**************** 3 | * @description : 公共CSS 4 | * @author : jinglei 5 | * @date : 2015-8-4 更新 6 | ****************/ 7 | 8 | /*css reset*/ 9 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0}html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;clear:both;} 10 | html { font-family: 'Microsoft YaHei',"Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; } 11 | body {font-size: 1.4rem;overflow-x: hidden;min-width:320px; /*-webkit-overflow-scrolling: touch;*/color:#1a1a1a;background:#f9f9f9; } 12 | a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #1a1a1a; } 13 | a:active { outline: 0; } 14 | a:active { color: #3990e6; } 15 | 16 | audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } 17 | audio:not([controls]) { display: none; height: 0; }svg:not(:root) { overflow: hidden; } 18 | 19 | hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }code, kbd, pre, samp { font-family: monospace; font-size: 1rem}mark { background: #ff0; color: #1a1a1a; }dfn { font-style: italic; } 20 | table { border-collapse: collapse; border-spacing: 0; }td, th { padding: 0; } 21 | ul, ol { list-style: none outside none; }h1, h2, h3,strong {font-weight: 600; } 22 | 23 | img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} 24 | 25 | button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } 26 | button { overflow: visible; } 27 | button, select { text-transform: none; } 28 | button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } 29 | button[disabled], html input[disabled] { cursor: default; } 30 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 31 | input { line-height: normal; } 32 | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } 33 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } 34 | input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 35 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 36 | textarea { overflow: auto; resize: vertical; } 37 | button, input, select, textarea { font-family:'Microsoft YaHei', "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;} 38 | input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; } 39 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; } 40 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; } 41 | 42 | /*commos*/ 43 | .border_box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 44 | .fl{float:left;}.fr{float:right;}.hide{display:none!important;}.show{display: block!important;} 45 | .ellipsis { white-space:nowrap; text-overflow:ellipsis; overflow:hidden} 46 | .break { word-break:break-all; word-wrap:break-word} 47 | .clearfix:after{content:'\0020';display:block;height:0;clear:both}.clearfix{*zoom:1} 48 | 49 | 50 | /*noScript*/ 51 | .noScript{margin:10px;text-align:center;background:#adb9c4;color:#fff;display:block; height:40px;line-height:40px} 52 | -------------------------------------------------------------------------------- /src/effects.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author designsor@gmail.com 3 | * @date 20150810 4 | * @fileoverview 特效扩展 5 | */ 6 | (function(win) { 7 | 8 | var EasySlide = win.EasySlide; 9 | 10 | var utils = EasySlide.utils; 11 | 12 | utils.mixin(EasySlide.animationEffects, { 13 | 'scale': function(ele, axis, offsetEnd, setTransition) { 14 | if (setTransition) { 15 | ele.style["-webkit-transition"] = this.transition; 16 | } 17 | var tIndex = parseInt(utils.attr(ele, 'index'), 10); 18 | var transform = 'translateZ(0) translate' + axis + '(' + offsetEnd + 'px)'; 19 | if (this.curIndex !== tIndex) { 20 | transform += ' scale(0.5)'; 21 | } 22 | ele.style["-webkit-transform"] = transform; 23 | }, 24 | 'flip': function(ele, axis, offsetEnd, setTransition) { 25 | if (setTransition) { 26 | ele.style["-webkit-transition"] = this.transition; 27 | } 28 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 29 | var tIndex = parseInt(utils.attr(ele, 'index'), 10); 30 | ele.style['-webkit-backface-visibility'] = 'hidden'; 31 | ele.style['-webkit-transform-style'] = 'preserve-3d'; 32 | ele.style.zIndex = tIndex; 33 | var eles = utils.getByTagName('*', ele); 34 | var duration = window.getComputedStyle(ele, null)['transition-duration']; 35 | duration = duration ? utils.transitionDurationToMilliseconds(duration) : 0; 36 | //有滚动条的容器，会对backface-visbility无效，需要做隐藏 37 | eles.forEach(function(ele) { 38 | if (utils.hasAttr(ele, 'scroll')) { 39 | utils.hide(ele); 40 | } 41 | }); 42 | if (this.curIndex === tIndex) { 43 | ele.style.visibility = 'visible'; 44 | ele.style['-webkit-transform'] = 'rotate' + rotateDirect + '(0deg) translateZ(0)'; 45 | } else { 46 | ele.style.visibility = 'hidden'; 47 | ele.style['-webkit-transform'] = 'rotate' + rotateDirect + '(180deg) translateZ(0)'; 48 | } 49 | setTimeout(function() { 50 | eles.forEach(function(ele) { 51 | if (utils.hasAttr(ele, 'scroll')) { 52 | utils.show(ele); 53 | } 54 | }); 55 | }, duration); 56 | }, 57 | //x 效果好 58 | 'rotate': function(ele, axis, offsetEnd, setTransition) { 59 | if (setTransition) { 60 | ele.style["-webkit-transition"] = this.transition; 61 | } 62 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 63 | var tIndex = parseInt(utils.attr(ele, 'index'), 10); 64 | var scale = axis === 'X' ? this.vW : this.vH; 65 | ele.style['-webkit-backface-visibility'] = 'hidden'; 66 | ele.style['-webkit-transform-style'] = 'preserve-3d'; 67 | ele.style.position = 'absolute'; 68 | this.wrapAll.style.webkitPerspective = scale * 4; 69 | if (tIndex === this.curIndex) { 70 | ele.style.zIndex = 1; 71 | ele.style['-webkit-transform'] = 'rotate' + rotateDirect + '(0deg) translateZ(0) scale(1)'; 72 | } else { 73 | var isNext = tIndex === this.curIndex + 1; 74 | var isEnd = this.curIndex === this.slidesLen - 1 && tIndex === 0; 75 | var index = isNext || isEnd ? 1 : -1; 76 | ele.style.zIndex = 0; 77 | ele.style['-webkit-transform'] = 'rotate' + rotateDirect + '(' + 90 * index + 'deg) translateZ(' + (0.888 * scale / 2) + 'px) translate' + axis + '(' + offsetEnd + 'px) scale(0.888)'; 78 | } 79 | }, 80 | 'card': function(ele, axis, offsetEnd, setTransition) { 81 | if (setTransition) { 82 | ele.style["-webkit-transition"] = this.transition; 83 | } 84 | var tIndex = parseInt(utils.attr(ele, 'index'), 10); 85 | var transform = 'translateZ(0) translate' + axis + '(' + offsetEnd + 'px)'; 86 | var duration = window.getComputedStyle(ele, null)['transition-duration']; 87 | duration = duration ? utils.transitionDurationToMilliseconds(duration) : 0; 88 | ele.style.position = 'absolute'; 89 | if (tIndex === this.curIndex) { 90 | ele.style.zIndex = 1; 91 | ele.style["-webkit-transform"] = transform; 92 | } else { 93 | ele.style.zIndex = 0; 94 | setTimeout(function() { 95 | ele.style["-webkit-transform"] = transform; 96 | }, duration); 97 | } 98 | } 99 | }); 100 | 101 | })(window); 102 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | EasySlide demo 9 | 10 | 11 | 12 | 13 | 48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |

EasySlide

59 |
    60 |
  1. 什么是EasySlide?
    2. 61 |
  2. 快速上手.
    3. 62 |
  3. 下载使用.
    4. 63 |
64 |

项目主页

65 |

http://github.com/xiaojue/EasySlide

66 |
67 |
68 |
69 |
70 |

什么是EasySlide?

71 |
72 |

73 | 不基于任何框架、快速、独立的制作H5 Mobile页面的框架。它包含资源loader，页面切换功能，子类PPT功能，内部页面跳转功能，page overlay功能，自定义动画效果和扩展动画效果等功能。 74 |

75 |

76 | 使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。 77 |

78 |

79 | 内置一些utils和动画效果，你也可以使用监听器和自己编写CSS类来扩展EasySlide. 80 |

81 |
82 |
83 |
84 |
85 |
86 |

快速上手.

87 |
88 |

89 | 引用好所需得JS和CSS文件，之后调用对应方法即可，如果不需要扩展，则只需要编写HTML部分即可，更多参见项目详细README. 90 |

91 |
92 |
93 |
94 |
95 |
96 |

下载使用.

97 |

项目主页

98 |

http://github.com/xiaojue/EasySlide

99 |
100 |
101 |
102 | 103 | 114 | 115 | -------------------------------------------------------------------------------- /demo/plugin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | EasySlide demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 53 | 54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |

EasySlide

64 |
    65 |
  1. 什么是EasySlide?
    2. 66 |
  2. 快速上手.
    3. 67 |
  3. 下载使用.
    4. 68 |
69 |

项目主页

70 |

http://github.com/xiaojue/EasySlide

71 |
72 |
73 |
74 |
75 |

什么是EasySlide?

76 |
77 |

不基于任何框架、快速、独立的制作H5 Mobile页面的框架。它包含资源loader，页面切换功能，子类PPT功能，内部页面跳转功能，page overlay功能，自定义动画效果和扩展动画效果等功能

78 |

使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。

79 |

使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。

80 |
81 |
82 |
83 |
84 |
85 |

快速上手.

86 |
87 |

88 | 引用好所需得JS和CSS文件，之后调用对应方法即可，如果不需要扩展，则只需要编写HTML部分即可，更多参见项目详细README. 89 |

90 |
91 |
92 |
93 |
94 |
95 |

下载使用.

96 |

项目主页

97 |

http://github.com/xiaojue/EasySlide

98 |
99 |
100 |
101 | 102 | 103 | 104 | 128 | 129 | -------------------------------------------------------------------------------- /demo/small.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | EasySlide demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 58 | 59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |

EasySlide

70 |
    71 |
  1. 什么是EasySlide?
    2. 72 |
  2. 快速上手.
    3. 73 |
  3. 下载使用.
    4. 74 |
75 |

项目主页

76 |

http://github.com/xiaojue/EasySlide

77 |
78 |
79 |
80 |
81 |

什么是EasySlide?

82 |
83 |

不基于任何框架、快速、独立的制作H5 Mobile页面的框架。它包含资源loader，页面切换功能，子类PPT功能，内部页面跳转功能，page overlay功能，自定义动画效果和扩展动画效果等功能

84 |

使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。

85 |

使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。

86 |
87 |
88 |
89 |
90 |
91 |

快速上手.

92 |
93 |

94 | 引用好所需得JS和CSS文件，之后调用对应方法即可，如果不需要扩展，则只需要编写HTML部分即可，更多参见项目详细README. 95 |

96 |
97 |
98 |
99 |
100 |
101 |

下载使用.

102 |

项目主页

103 |

http://github.com/xiaojue/EasySlide

104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 | 173 | 174 | -------------------------------------------------------------------------------- /src/ppt.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author designsor@gmail.com 3 | * @date 20150810 4 | * @fileoverview 子ppt功能 5 | */ 6 | (function(win, doc) { 7 | 8 | var EasySlide = win.EasySlide; 9 | 10 | var utils = EasySlide.utils; 11 | 12 | var Subppt = function(obj) { 13 | this.curIndex = 0; 14 | this.width = obj.width; 15 | this.height = obj.height; 16 | this.init(obj); 17 | }; 18 | 19 | Subppt.STATIC = { 20 | slideCls: 'EasySlide-subppt-slide', 21 | imgWrapCls: 'EasySlide-subppt-imgWrap' 22 | }; 23 | 24 | 25 | Subppt.prototype = { 26 | init: function(obj) { 27 | this.wrapDiv = utils.$(obj.wrapDiv); 28 | this.imgs = obj.imgs; 29 | this.slidesLen = this.imgs.length; 30 | this.initSlides(this.wrapDiv); 31 | utils.bind(win, "resize", this.resize.bind(this)); 32 | this.showCurSlide(); 33 | }, 34 | resize: function() { 35 | this.initSlides(this.wrapDiv); 36 | var floorvW = this.floorvW.bind(this); 37 | var slides = utils.getByClsName(Subppt.STATIC.slideCls, this.wrapDiv); 38 | slides.forEach(function(slide) { 39 | slide.style.width = floorvW(0.6) + "px"; 40 | }); 41 | this.showCurSlide(); 42 | }, 43 | setPos: function(el, posX, posY, scale) { //设置slide的水平方向位置 44 | posX = posX || 0; 45 | posY = posY || 0; 46 | var transform = "translate3d(" + posX + "px," + posY + "px,0)"; 47 | if (scale) { 48 | transform += " scale3d(" + scale + "," + scale + ",1)"; 49 | } 50 | el.style["-webkit-transform"] = transform; 51 | }, 52 | createSlide: function(index) { 53 | var tDiv = doc.createElement("div"); 54 | tDiv.className = Subppt.STATIC.slideCls; 55 | utils.attr(tDiv, "subindex", index); 56 | tDiv.style.width = this.floorvW(0.6) + "px"; 57 | tDiv.innerHTML = "
"; 58 | this.wrapDiv.appendChild(tDiv); 59 | return tDiv; 60 | }, 61 | floorvW: function(num) { 62 | return Math.floor(this.vW * num); 63 | }, 64 | showCurSlide: function() { 65 | var self = this, 66 | floorvW = self.floorvW.bind(this), 67 | hasCurEffect = [floorvW(0.2)], 68 | hasNext1Effect = [floorvW(0.9), floorvW(0.05), 0.8], 69 | hasNext2Effect = [self.vW + 150, floorvW(0.1), 0.7], 70 | hasPrev1Effect = [-floorvW(0.38), floorvW(0.05), 0.8], 71 | hasPrev2Effect = [-self.vW - 150, floorvW(0.1), 0.7], 72 | slides = utils.getByClsName(Subppt.STATIC.slideCls, this.wrapDiv); 73 | 74 | var last1 = this.slidesLen - 1; 75 | var last2 = this.slidesLen - 2; 76 | var next1 = this.curIndex + 1; 77 | var next2 = this.curIndex + 2; 78 | var prev1 = this.curIndex - 1; 79 | var prev2 = this.curIndex - 2; 80 | 81 | var states = { 82 | hasCur: false, 83 | hasPrev1: false, 84 | hasPrev2: false, 85 | hasNext1: false, 86 | hasNext2: false 87 | }; 88 | 89 | slides.forEach(function(slide) { 90 | 91 | var tIndex = parseInt(utils.attr(slide, "subindex"), 10); 92 | var isCur = tIndex === this.curIndex; 93 | var isNext = tIndex === next1; 94 | var isLast = (this.curIndex === last1 && tIndex === 0); 95 | var isNext2 = tIndex === next2; 96 | var isNextLast2 = (this.curIndex === last1 && tIndex === 1) || (this.curIndex === last2 && tIndex === 0); 97 | var isPrev = tIndex === prev1; 98 | var isFirst = (this.curIndex === 0 && tIndex === last1); 99 | var isPrev2 = tIndex === prev2; 100 | var isPrevFirst2 = (this.curIndex === 0 && tIndex === last2) || (this.curIndex === 1 && tIndex === last1); 101 | 102 | function setState(states) { 103 | var posArgs = []; 104 | for (var state in states) { 105 | if (states[state] === true) { 106 | switch (state) { 107 | case 'hasCur': 108 | posArgs = [slide].concat(hasCurEffect); 109 | break; 110 | case 'hasNext1': 111 | posArgs = [slide].concat(hasNext1Effect); 112 | break; 113 | case 'hasNext2': 114 | posArgs = [slide].concat(hasNext2Effect); 115 | break; 116 | case 'hasPrev1': 117 | posArgs = [slide].concat(hasPrev1Effect); 118 | break; 119 | case 'hasPrev2': 120 | posArgs = [slide].concat(hasPrev2Effect); 121 | break; 122 | } 123 | break; 124 | } 125 | } 126 | self.setPos.apply(self, posArgs); 127 | } 128 | 129 | var hasCur = isCur; 130 | var hasNext1 = isNext || isLast; 131 | var hasNext2 = isNext2 || isNextLast2; 132 | var hasPrev1 = isPrev || isFirst; 133 | var hasPrev2 = isPrev2 || isPrevFirst2; 134 | //局部的每次都做动画 135 | setState({ 136 | hasCur: isCur, 137 | hasNext1: hasNext1, 138 | hasNext2: hasNext2, 139 | hasPrev1: hasPrev1, 140 | hasPrev2: hasPrev2 141 | }); 142 | //全局只标记一次 143 | states.hasCur = states.hasCur ? states.hasCur : hasCur; 144 | states.hasNext1 = states.hasNext1 ? states.hasNext1 : hasNext1; 145 | states.hasNext2 = states.hasNext2 ? states.hasNext2 : hasNext2; 146 | states.hasPrev1 = states.hasPrev1 ? states.hasPrev1 : hasPrev1; 147 | states.hasPrev2 = states.hasPrev2 ? states.hasPrev2 : hasPrev2; 148 | 149 | }.bind(this)); 150 | 151 | function createCur() { 152 | var tDiv = self.createSlide(self.curIndex); 153 | self.setPos.apply(self, [tDiv].concat(hasCurEffect)); 154 | } 155 | 156 | function createNext1() { 157 | var tDiv = self.curIndex < last1 ? self.createSlide(next1) : self.createSlide(0); 158 | self.setPos.apply(self, [tDiv].concat(hasNext1Effect)); 159 | } 160 | 161 | function createNext2() { 162 | var tDiv; 163 | if (self.curIndex < last2) { 164 | tDiv = self.createSlide(next2); 165 | } else if (self.curIndex === last2) { 166 | tDiv = self.createSlide(0); 167 | } else { 168 | tDiv = self.createSlide(1); 169 | } 170 | self.setPos.apply(self, [tDiv].concat(hasNext2Effect)); 171 | } 172 | 173 | function createPrev1() { 174 | var tDiv = self.curIndex > 0 ? self.createSlide(prev1) : self.createSlide(last1); 175 | self.setPos.apply(self, [tDiv].concat(hasPrev1Effect)); 176 | } 177 | 178 | function createPrev2() { 179 | var tDiv; 180 | if (self.curIndex > 1) { 181 | tDiv = self.createSlide(prev2); 182 | } else if (self.curIndex === 1) { 183 | tDiv = self.createSlide(last1); 184 | } else { 185 | tDiv = self.createSlide(last2); 186 | } 187 | self.setPos.apply(self, [tDiv].concat(hasPrev2Effect)); 188 | } 189 | 190 | var createSlide = { 191 | hasCur: createCur, 192 | hasNext1: createNext1, 193 | hasNext2: createNext2, 194 | hasPrev1: createPrev1, 195 | hasPrev2: createPrev2 196 | }; 197 | 198 | for (var i in states) { 199 | if (states.hasOwnProperty(i) && !states[i]) { 200 | createSlide[i](); 201 | } 202 | } 203 | }, 204 | move: function(direction) { 205 | var slides = utils.getByClsName(Subppt.STATIC.slideCls, this.wrapDiv); 206 | for (var i = 0, len = slides.length; i < len; i++) { 207 | var tIndex = parseInt(utils.attr(slides[i], "subindex"), 10); 208 | var delta = direction === 1 ? this.curIndex - tIndex : tIndex - this.curIndex; 209 | delta = delta > 0 ? delta : delta + this.slidesLen; 210 | if (delta === 2) { 211 | utils.remove(slides[i]); //删掉最左侧的隐藏slide，否则如果正好5张，动画会重叠，因为此时没有slide是隐藏的 212 | break; 213 | } 214 | } 215 | if (direction === 1) { 216 | this.curIndex++; 217 | if (this.curIndex >= this.slidesLen) { 218 | this.curIndex = 0; 219 | } 220 | } else { 221 | this.curIndex--; 222 | if (this.curIndex < 0) { 223 | this.curIndex = this.slidesLen - 1; 224 | } 225 | } 226 | this.showCurSlide(); 227 | } 228 | }; 229 | 230 | Subppt.prototype.initSlides = EasySlide.prototype.initSlides; 231 | 232 | EasySlide.prototype.initSubPPT = function(subpptObjects) { 233 | var self = this; 234 | 235 | function initSub(index, subpptObj) { 236 | self.subppt[index] = new EasySlide.Subppt({ 237 | width: self.vW, 238 | height: self.vH, 239 | wrapDiv: subpptObj.wrapDiv, 240 | imgs: subpptObj.imgs 241 | }); 242 | self.subpptNum.push(subpptObj.parentNum); 243 | } 244 | 245 | subpptObjects.forEach(function(subpptObj, index) { 246 | var tTarget = utils.$(subpptObj.wrapDiv); 247 | tTarget = utils.contain(tTarget, EasySlide.STATIC.flayerCls); 248 | if (tTarget) { 249 | var trigger = utils.$(utils.attr(tTarget, EasySlide.STATIC.flayerTriggerCls)); 250 | utils.bind(trigger, "click", function() { 251 | initSub(index, subpptObj); 252 | }); 253 | } else { 254 | initSub(index, subpptObj); 255 | } 256 | }); 257 | }; 258 | 259 | EasySlide.Subppt = Subppt; 260 | 261 | })(window, document); 262 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EasySlide 2 | 3 | Easy to build a mobile page slide. 4 | 5 | ---- 6 | 7 | ### 介绍 8 | 9 | EasySlide 不基于任何框架。它是一个可以快速、独立的制作H5 Mobile页面的微框架。 10 | 11 | 它包含`加载资源loader`，`页面切换`，`子类PPT`，`内部页面跳转`，`page layer`，`自定义动画效果`和`扩展动画效果`等功能。 12 | 13 | 使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可，它还内置一些utils和动画效果，你也可以使用监听器和自己编写CSS类来扩展EasySlide. 14 | 15 | EasySlide独立分为4个js文件，如果你只需要基本功能，则只引用dist/EasySlide.js即可。 16 | 17 | ### Demo 18 | 19 | 20 | ``` 21 | gif图片较大，耐心等待刷出~，gif有丢帧，详细请clone本项目，打开demo文件夹查看，本地可运行。 22 | ``` 23 | 24 | ### 快速上手 25 | 26 | 首先需要引用对应的css和javascript，和要求的HTML结构，本框架只支持移动端，更多API见参考文档。 27 | 28 | ```html 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |

Title

49 |
50 |
51 |
52 | 74 | 75 | 76 | ``` 77 | 78 | ### API 79 | 80 | ----- 81 | 82 | ##### EasySlide 83 | 84 | ----- 85 | 86 | #### 方法 87 | 88 | ----- 89 | 90 | ##### loader 91 | ```js 92 | new EasySlide({ 93 | 94 | }).loader(["img1.jpg","img2.jpg"]); 95 | 96 | //调用loader方法可以实现预加载图片资源，并可以监听到loaded和progress两个事件 97 | ``` 98 | ##### goto 99 | ```js 100 | var Slide = new EasySlide({}); 101 | Slide.goto(3); 102 | //页面跳转到对应的slide index 103 | ``` 104 | ##### move 105 | ```js 106 | var Slide = new EasySlide({}); 107 | Slide.move(1) //-1 参数为1或者-1 108 | //移动当前页面至前后一页 109 | ``` 110 | ##### renderSlide 111 | ```js 112 | 动态修改过容器之后，可以调用此方法重新计算容器动画和元素个数。 113 | ``` 114 | ##### showCurSlide 115 | ```js 116 | 可以调用此方法执行当前页切换动画 117 | ``` 118 | ##### getCurAllowSwipe 119 | ```js 120 | 获取当前slide的可滑动状态 121 | ``` 122 | ----- 123 | 124 | #### 事件 125 | 126 | ----- 127 | 128 | ##### progress 129 | ##### loaded 130 | ```js 131 | //loader只后，使用on方法可以监听到progress事件，回调第一个参数为百分比 132 | var Slide = new EasySlide({}); 133 | Slide.on("progress",function(pre){ 134 | //xx.xx % 135 | }); 136 | Slide.on("loaded",function(){ 137 | //load资源结束 138 | }); 139 | Slide.loader(["1.jpg","2.jpg"]); 140 | ``` 141 | ##### swipeY 142 | ##### swipeX 143 | ##### swipeMove 144 | ##### swipeEnd 145 | ```js 146 | var Slide = new EasySlide({}); 147 | Slide.on("swipeX",function(direction){ 148 | //direction为 1或者-1 代表方向 149 | }); 150 | Slide.on("swipeY",function(direction){ 151 | //direction为 1或者-1 代表方向 152 | }); 153 | Slide.on("swipeMove",function(){ 154 | //可以自己扩展移动时的动画，在demo中有体现用法 155 | }); 156 | Slide.on("swipeEnd",function(){ 157 | //在touchend时触发 158 | }); 159 | ``` 160 | ##### dragDirecNotEqual 161 | ```js 162 | 在滑动方向与默认方向相反时，touchEnd触发 163 | ``` 164 | ##### slide-switchEnd 165 | ##### ppt-switchEnd 166 | ```js 167 | var Slide = new EasySlide({}); 168 | Slide.on("slide-switchEnd",function(allowSwipe){ 169 | //slide翻页结束后触发，回调返回该页是否可被继续swipe，allowSwipe可能为next或者prev 170 | }); 171 | Slide.on("ppt-switchEnd",function(direction){ 172 | //幻灯翻页结束后触发 173 | }); 174 | ``` 175 | 176 | ----- 177 | 178 | #### 初始化参数配置 179 | 180 | ----- 181 | ##### wrapAll 182 | ```js 183 | //必填，所有slides的父节点id 184 | ``` 185 | ##### SubpptObjects 186 | ```js 187 | SubpptObjects:[{ 188 | wrapDiv:"", //ppt节点id 189 | imgs:["1.jpg","2.jpg"], //ppt幻灯图片 190 | parentNum:0 //所在父节点的index值 191 | }] 192 | ``` 193 | ##### replay 194 | ```js 195 | //布尔值，默认为false，表示动画结束后，再次翻到此页，是否重播动画，对所有slide生效。 196 | ``` 197 | ##### firstTime 198 | ```js 199 | 第一屏第一轮是否可以回滚设置，默认为true，不可以 200 | ``` 201 | ##### animateEffect 202 | ``` 203 | slide切换所使用的特效名称 默认 default, 可选:(card,rotate,flip,scale) 204 | ``` 205 | ##### swipeDirection 206 | ```js 207 | slide滑动方向，默认为 "y" 208 | ``` 209 | ##### margin 210 | ```js 211 | 选填默认0，制作多个slide共存在view中可用 212 | ``` 213 | ##### transition 214 | ``` 215 | 默认为"all 0.5s ease" 为slide的默认transition参数 216 | ``` 217 | ----- 218 | 219 | #### animate参数配置 220 | ``` 221 | 设置为class="EasySlide-animate"的节点，都可以配置如下参数 222 | ``` 223 | ----- 224 | 225 | ##### in 226 | ``` 227 | 默认自带得animate效果有zoomIn,fadeIn,fadeInDown,fadeInUp,pulse 228 | 可在EasySlide.css中找到，也可以自己增加。 229 | ``` 230 | ##### delay 231 | ``` 232 | 设置动画开始延迟时间 delay=".5s" 233 | ``` 234 | ##### duration 235 | ``` 236 | 设置动画总时间 duration="1s" 237 | ``` 238 | ##### tfunction 239 | ``` 240 | 设置动画的timing-function，默认ease 241 | ``` 242 | ##### iteration 243 | ``` 244 | 设置动画的iteration,默认是 1 245 | ``` 246 | ----- 247 | 248 | #### slide参数配置 249 | ``` 250 | 设置为class="EasySlide-slides"下的子节点都可以配置如下参数 251 | ``` 252 | ##### index 253 | ``` 254 | slide所属顺序 255 | ``` 256 | ##### gindex 257 | ``` 258 | group所属顺序 259 | ``` 260 | ##### layerid 261 | ``` 262 | 点击某节点后弹出浮层的浮层id,对应用法需要在点击节点上设置flayerTriggerCls 263 | ``` 264 | ##### scroll 265 | ``` 266 | 当前层是否为带scroll y的节点，设置后，滚动条可用，如demo。 267 | ``` 268 | ##### goto 269 | ``` 270 | 点击节点后跳转至对应slide goto="3" 271 | ``` 272 | ##### allowswipe 273 | ``` 274 | 当前slide是否允许被滑动，可设置next和prev，不设置为上下均可滑动,设置在group节点上。 275 | ``` 276 | ----- 277 | 278 | ##### EasySlide.STATIC 279 | ``` 280 | 默认的EasySlide className储存位置，如果想自定义可以修改。 281 | ``` 282 | ##### EasySlide.STATIC.flayerCls 283 | ``` 284 | 默认为 EasySlide-flayer 285 | ``` 286 | ##### EasySlide.STATIC.flayerTriggerCls 287 | ``` 288 | 默认为 EasySlide-triggerLayer 289 | ``` 290 | ##### EasySlide.STATIC.animateCls 291 | ``` 292 | 默认为 EasySlide-animate 293 | ``` 294 | ##### EasySlide.STATIC.groupCls 295 | ``` 296 | 默认为 EasySlide-groups 297 | ``` 298 | ##### EasySlide.STATIC.slideCls 299 | ``` 300 | 默认为 EasySlide-slides 301 | ``` 302 | ----- 303 | 304 | ##### EasySlide.Subppt.STATIC 305 | ``` 306 | 默认的EasySlide subppt className储存位置，如果想自定义可以修改。 307 | ``` 308 | ----- 309 | 310 | ##### EasySlide.Subppt.STATIC.slideCls 311 | ``` 312 | 默认为 EasySlide-subppt-slide 313 | ``` 314 | ##### EasySlide.Subppt.STATIC.imgWrapCls 315 | ``` 316 | 默认为 EasySlide-subppt-imgWrap 317 | ``` 318 | ----- 319 | 320 | ##### EasySlide.utils 321 | ``` 322 | 一些常见的工具方法 323 | ``` 324 | ----- 325 | 326 | ##### EasySlide.utils.$ 327 | ```js 328 | //id选择器 返回element 329 | EasySlide.utils.$("id") 330 | ``` 331 | ##### EasySlide.utils.getByTagName 332 | ```js 333 | //Tag选择器 返回array类型的元素数组 334 | var imgs = EasySlide.utils.getByTagName("img"); 335 | imgs.forEach(); //可调用array方法 336 | ``` 337 | ##### EasySlide.utils.getByClsName 338 | ```js 339 | //ClassName选择器 返回array类型的元素数组 340 | var eles = EasySlide.utils.getByTagName("cls"); 341 | eles.forEach(); //可调用array方法 342 | ``` 343 | ##### EasySlide.utils.makeElesArray 344 | ```js 345 | // 把类数组元素转换成数组元素 返回数组 346 | EasySlide.utils.makeElesArray(arguments); //可调用array方法 347 | ``` 348 | ##### EasySlide.utils.attr 349 | ```js 350 | //或者和设置属性方法 351 | EasySlide.utils.attr(ele,"key") //返回key的val 352 | EasySlide.utils.attr(ele,"key","test") //设置ele的key的属性为test 353 | ``` 354 | ##### EasySlide.utils.bind 355 | ```js 356 | //绑定DOM事件 357 | EasySlide.utils.bind(ele,"click",func); 358 | ``` 359 | ##### EasySlide.utils.unbind 360 | ```js 361 | //解绑DOM事件 362 | EasySlide.utils.unbind(ele,"click",func); 363 | ``` 364 | ##### EasySlide.utils.viewDate 365 | ```js 366 | 获取窗口视图信息 367 | EasySlide.utils.viewDate(); 368 | //返回值为 369 | /** 370 | { 371 | scrollTop:, 372 | scrollLeft:, 373 | documentWidth:, 374 | documentHeight:, 375 | viewWidth:, 376 | viewHeight 377 | }; 378 | */ 379 | ``` 380 | ##### EasySlide.utils.remove 381 | ```js 382 | //删除DOM元素 383 | EasySlide.utils.remove(ele) //删除一个ele元素 384 | ``` 385 | ##### EasySlide.utils.hide 386 | ```js 387 | //隐藏DOM元素 388 | EasySlide.utils.hide(ele); 389 | ``` 390 | ##### EasySlide.utils.show 391 | ```js 392 | //显示DOM元素 393 | EasySlide.utils.show(ele); 394 | ``` 395 | ##### EasySlide.utils.hasAttr 396 | ```js 397 | //查看DOM元素是否有自定义属性 398 | EasySlide.utils.hasAttr(ele,"key") // true , false 399 | ``` 400 | ##### EasySlide.utils.contain 401 | ```js 402 | //查看是否包含对应className的元素 403 | EasySlide.utils.contain(ele,"clsName"); 404 | //返回false或者这个clsName元素 405 | ``` 406 | ##### EasySlide.utils.isWeixin 407 | ```js 408 | //检查是否是微信浏览器 409 | EasySlide.utils.isWeixin() //true false 410 | ``` 411 | ##### EasySlide.utils.hasClass 412 | ```js 413 | //检查是否包含对应cls 414 | EasySlide.utils.hasClass(ele,"clsName"); //true ,false 415 | ``` 416 | ##### EasySlide.utils.shareWeibo 417 | ```js 418 | //分享到微博 419 | EasySlide.utils.shareWeibo({title:"xxx",shareImg:"xxx"}); 420 | ``` 421 | ##### EasySlide.utils.mixin 422 | ```js 423 | //属性拷贝方法 424 | EasySlide.utils.mixin({a:0,b:1},{a:1}) //返回{a:1,b:1} 425 | ``` 426 | ##### EasySlide.utils.isArray 427 | ```js 428 | //判断元素是否为数组 429 | EasySlide.utils.isArray([]) //true 430 | ``` 431 | ##### EasySlide.utils.isObject 432 | ```js 433 | //判断元素是否为Object 434 | EasySlide.utils.isObject({}) //true 435 | ``` 436 | ##### EasySlide.utils.transitionDurationToMilliseconds 437 | ```js 438 | //转换duration为毫秒数 439 | EasySlide.utils.transitionDurationToMilliseconds("5s") //5000 440 | EasySlide.utils.transitionDurationToMilliseconds("0.5s") //500 441 | EasySlide.utils.transitionDurationToMilliseconds("50ms") //50 442 | ``` 443 | ----- 444 | -------------------------------------------------------------------------------- /dist/EasySlide.js: -------------------------------------------------------------------------------- 1 | !function(t,i,s){function e(){var t=/(iPhone|iOS)/i.test(navigator.userAgent),i=414===window.screen.width;return t&&i}var n=navigator.userAgent,r=Object.prototype.toString,o={isPhone6P:e(),$:function(t){return i.getElementById(t)},getByTagName:function(t,s){return s=s||i,o.makeElesArray(s.getElementsByTagName(t))},getByClsName:function(t,s){return s=s||i,o.makeElesArray(s.getElementsByClassName(t))},makeElesArray:function(t){return Array.prototype.slice.call(t)},attr:function(t,i,e){return e!==s?t.setAttribute(i,e):t.getAttribute(i)},bind:function(t,i,s){t.addEventListener(i,s,!1)},unbind:function(t,i,s){t.removeEventListener(i,s,!1)},viewData:function(){var s=t,e=i.body,n=i.documentElement,r=s.innerWidth||n.clientWidth||e.clientWidth||0,a=s.innerHeight||n.clientHeight||e.clientHeight||0;return o.isPhone6P&&(r=n.clientWidth),{scrollTop:e.scrollTop||n.scrollTop||s.pageYOffset,scrollLeft:e.scrollLeft||n.scrollLeft||s.pageXOffset,documentWidth:Math.max(e.scrollWidth,n.scrollWidth||0),documentHeight:Math.max(e.scrollHeight,n.scrollHeight||0,a),viewWidth:r,viewHeight:a}},remove:function(t){t&&t.nodeName&&t.parentNode.removeChild(t)},hide:function(t){t.style.display="none"},show:function(t){t.style.display="block"},hasAttr:function(t,i){return t.hasAttribute(i)},contain:function(t,i){for(;t&&t.parentNode;){if(o.hasClass(t,i))return t;t=t.parentNode}return!1},hasClass:function(t,i){return t.className.match(new RegExp("(\\s|^)"+i+"(\\s|$)"))},addClass:function(t,i){this.hasClass(t,i)||(t.className+=" "+i)},removeClass:function(t,i){if(this.hasClass(t,i)){var s=new RegExp("(\\s|^)"+i+"(\\s|$)");t.className=t.className.replace(s," ")}},isWeixin:function(){var t=n.toLowerCase().match(/MicroMessenger/i);return t?"micromessenger"===t[0]:!1},shareWeibo:function(s){var e=i.title||s.title,r=s.shareImg||"",o=/weibo/i;o.test(n)?t.WeiboJSBridge.invoke("openMenu",{},function(){}):i.location.href="http://share.sina.cn/callback?vt=4&title="+encodeURIComponent(e)+"&pic="+encodeURIComponent(r)+"&url="+encodeURIComponent(document.location.href)},mixin:function(t,i){for(var s in i)i.hasOwnProperty(s)&&(t[s]=i[s]);return t},transitionDurationToMilliseconds:function(t){var i,s,e,n=t.match(/^([\d\.]+)(\w+)$/);if(n.length<=1)return t;switch(i=n[1],s=n[2]){case"ms":e=1;break;case"s":e=1e3}return i*e},isArray:function(t){return"[object Array]"===r.call(t)},isObject:function(t){return"[object Object]"===r.call(t)},isMobile:function(){try{return document.createEvent("TouchEvent"),!0}catch(t){return!1}}},a=function(){this.map={}};a.prototype={constructor:Event,trigger:function(t,i){this.map[t]&&this.map[t].forEach(function(t){t.apply(this,i)})},on:function(t,i){this.map[t]?this.map[t].push(i):this.map[t]=[i]},off:function(t,i){i?this.map[t]&&(this.map[t]=this.map[t].filter(function(t){return t!==i})):this.map[t]=[]}};var l=function(t){this.startX=0,this.startY=0,this.lastX=0,this.lastY=0,this.scrollEle=null,this.scrollEleDire=null,this.startTime=null,this.ele=t,a.call(this),this.bindSwipe(t)};l.prototype={constructor:l,isScrollContain:function(t){for(;t&&t.parentNode;){if(o.hasAttr(t,"scroll"))return t;t=t.parentNode}return null},bindSwipe:function(t){if(o.isMobile())o.bind(t,"touchstart",this._touchstart.bind(this)),o.bind(t,"touchmove",this._touchmove.bind(this)),o.bind(t,"touchend",this._touchend.bind(this));else{var i=this._touchstart.bind(this),s=this._touchmove.bind(this),e=this._touchend.bind(this);o.bind(t,"mousedown",function(e){o.bind(t,"mousemove",s),i(e)}),o.bind(t,"mouseup",function(i){o.unbind(t,"mousemove",s),e(i)})}},_touchstart:function(t){return t.touches&&t.touches.length>1?!1:(this.scrollEle=null,this.scrollEleDire=null,this.startX=this.lastX=o.isMobile()?t.touches[0].pageX:t.clientX,this.startY=this.lastY=o.isMobile()?t.touches[0].pageY:t.clientY,this.startTime=Date.now(),void(this.disabled&&t.preventDefault()))},_touchmove:function(t){var i=this.isScrollContain(t.target),s=this.lastY=o.isMobile()?t.touches[0].pageY:t.clientY,e=this.lastX=o.isMobile()?t.touches[0].pageX:t.clientX;if(t.touches&&t.touches.length>1)return!1;if(i)return this.scrollEle=i,this.scrollEleDire=o.attr(i,"scroll"),!1;var n=this.startX,r=this.startY,a=Math.abs(this.lastX-this.startX),l=Math.abs(this.lastY-this.startY),h=Date.now()-this.startTime,c=a>l?"X":"Y",u={x:e-n>=0?1:-1,y:s-r>=0?1:-1};this.trigger("swipeMove",[this.slides,{moveTime:h,positive:u,direc:c,moveX:a,moveY:l,startX:n,startY:r,lastX:e,lastY:s},t.target]),t.preventDefault()},_touchend:function(t){var i=t.target,s=Math.abs(this.lastX-this.startX),e=Math.abs(this.lastY-this.startY),n=s>e?"x":"y",r=20;if("x"===n&&r>s||"y"===n&&r>e)return!1;n!==this.swipeDirection&&this.trigger("dragDirecNotEqual");var o="y"===n?"swipeY":"swipeX",a="y"===n?this.lastY=c?this.trigger(o,[1,i]):10>l&&this.trigger(o,[-1,i]),!1}var u=this.lastY,d=this.lastX,p=this.startY,f=this.startX;return this.trigger("swipeEnd",[{lastY:u,startY:p,lastX:d,startX:f}]),this.disabled?!1:(this.trigger(o,[a,i]),void(this.startX=this.startY=this.lastX=this.lastY=0))}},l.prototype=o.mixin(l.prototype,a.prototype);var h=function(t){this.slides=[],this.slidesLen=0,this.curIndex=0,this.curGroups=[],this.curGLen=0,this.curGIndex=0,this.disabled=!1,this.subppt=[],this.subpptNum=[];var i={margin:0,backgroungMusic:null,transition:"all 0.5s ease",firstTime:!0,animateEffect:"default",swipeDirection:"y",replay:!1,wrapAll:""};o.mixin(i,t),o.mixin(this,i),this.wrapAll=o.$(this.wrapAll),l.call(this,this.wrapAll),this.bgMusicPlaying=!1,this.init()};h.STATIC={flayerCls:"EasySlide-flayer",flayerTriggerCls:"EasySlide-triggerLayer",animateCls:"EasySlide-animate",groupCls:"EasySlide-groups",slideCls:"EasySlide-slides"},h.animationEffects={"default":function(t,i,s,e){e&&(t.style["-webkit-transition"]=this.transition),t.style["-webkit-transform"]="translateZ(0) translate"+i+"("+s+"px)"}},h.prototype={constructor:h,bindEvent:function(){o.bind(this.wrapAll,"click",this._click.bind(this)),this.on("swipeY",this.allowSwipeY.bind(this)),this.on("swipeX",this.allowSwipeX.bind(this)),o.bind(t,"resize",this.resize.bind(this)),o.bind(t,"scroll",function(t){t.preventDefault()})},renderSlide:function(){this.slides=o.getByClsName(h.STATIC.slideCls,this.wrapAll),this.slidesLen=this.slides.length,this.curGroups=o.getByClsName(h.STATIC.groupCls,this.slides[0]),this.curGLen=this.curGroups.length,this.showCurSlide()},init:function(){if(this.initSlides(this.wrapAll),this.renderSlide(),this.bindEvent(),this.subpptObjects){if(!h.Subppt)throw new Error("must have ppt.js!");this.initSubPPT(this.subpptObjects)}},initSlides:function(t){this.vW=this.width||o.viewData().viewWidth,this.vH=this.height||o.viewData().viewHeight,t.style.height=this.vH+"px",t.style.width=this.vW+"px"},setBgMusic:function(){if(this.backgroungMusic){var t=this.backgroungMusic,s=i.createElement("audio");s.loop="loop",this.music=s,this.trigger("beforeMusicStart",[this.music]),s.src=t,this.trigger("musicStart",[this.music]),i.body.appendChild(s)}},bgMusicPlay:function(){this.music&&(this.bgMusicPlaying=!0,this.music.play(),this.trigger("musicPlay",[this.music]))},bgMusicPause:function(){this.music&&(this.bgMusicPlaying=!1,this.music.pause(),this.trigger("musicPause",[this.music]))},bgMusicSwitch:function(){this.music&&(this.bgMusicPlaying?this.bgMusicPause():this.bgMusicPlay())},resize:function(){var t=this;setTimeout(function(){t.initSlides(t.wrapAll),t.showCurSlide()},100)},getEffects:function(t){return o.attr(t,"effect")||this.animateEffect},setYPos:function(t,i){var s=this.getEffects(t);h.animationEffects[s].call(this,t,"Y",i,!0)},setXPos:function(t,i){var s=this.getEffects(t);h.animationEffects[s].call(this,t,"X",i,!0)},removeAnimation:function(t){t.style["-webkit-animation"]="",t.offsetWidth=t.offsetWidth},setAnimation:function(t,i){t.style["-webkit-animation"]=i.name+" "+i.duration+" "+i.tfunction+" "+i.delay+" "+i.iteration+" normal forwards"},setAnimationAttr:function(t){var i=o.attr,s=t.style,e={"in":i(t,"in")||s["-webkit-animation-name"]||"",duration:i(t,"duration")||s["-webkit-animation-duration"]||"",tfunction:i(t,"tfunction")||s["-webkit-timing-function"]||"",delay:i(t,"delay")||s["-webkit-animation-delay"]||"",iteration:i(t,"iteration")||s["-webkit-iteration-count"]||""};for(var n in e)""!==e[n]&&null!==e[n]&&i(t,n,e[n])},showSlide:function(){var t=this;this.slides.forEach(function(i){var s=parseInt(o.attr(i,"index"),10),e=t.curIndex===t.slidesLen-1&&0===s,n=0===t.curIndex&&s===t.slidesLen-1,r=s===t.curIndex,a=s===t.curIndex+1,l=s===t.curIndex-1,h=r?0:null,c=r?0:null;a||e?(h=t.vH+t.margin,c=t.vW+t.margin):(l||n)&&(h=-t.vH-t.margin,c=-t.vW-t.margin),r||a||l||e||n?("y"===t.swipeDirection?t.setYPos(i,h):"x"===t.swipeDirection&&t.setXPos(i,c),o.show(i)):o.hide(i)})},showCurSlide:function(){var t=this,i=o.attr;this.trigger("beforeShowSlide",[s,this.curGroups]),this.showSlide(),this.curGroups.forEach(function(s){var e=parseInt(o.attr(s,"gIndex"),10);if(e===t.curGIndex){o.show(s);var n=o.getByClsName(h.STATIC.animateCls,s);n.forEach(t.setAnimationAttr),t.replay&&n.forEach(t.removeAnimation),n.forEach(function(s){t.setAnimation(s,{name:i(s,"in"),duration:i(s,"duration")||".5s",tfunction:i(s,"tfunction")||"ease",delay:i(s,"delay")||0,iteration:i(s,"iteration")||1})}),t.trigger("showCurSlide",[s])}else o.hide(s)});var s=this.getCurAllowSwipe();this.trigger("slide-switchEnd",[s,this.curGroups])},getCurAllowSwipe:function(){return o.attr(this.curGroups[this.curGIndex],"allowswipe")},allowSwipeY:function(t){this.allowSwipe(t,"y")},allowSwipeX:function(t,i){var s=this.subpptNum.indexOf(this.curIndex);return-1!==s&&o.contain(i,h.Subppt.STATIC.imgWrapCls)?(this.subppt[s].move(t),void this.trigger("ppt-switchEnd")):void this.allowSwipe(t,"x")},allowSwipe:function(t,i){var s=this.getCurAllowSwipe();s&&"next"!==s&&"prev"!==s||this.swipeDirection!==i||("next"===s&&1===t||"prev"===s&&-1===t||null===s)&&this.move(t)},move:function(t){var i={1:function(){this.curGIndex=this.slidesLen&&(this.curIndex=0),this.curIndex===this.slidesLen-1&&(this.firstTime=!1),this.curGroups=o.getByClsName(h.STATIC.groupCls,this.slides[this.curIndex]),this.curGLen=this.curGroups.length,this.curGIndex=0)},"-1":function(){this.curGIndex>0?this.curGIndex--:(this.curIndex--,this.curIndex<0&&(this.curIndex=this.firstTime?0:this.slidesLen-1),this.curGroups=o.getByClsName(h.STATIC.groupCls,this.slides[this.curIndex]),this.curGLen=this.curGroups.length,this.curGIndex=this.curGLen-1)}};i[t].call(this),this.showCurSlide()},_click:function(t){for(var i=t.target;i&&i.parentNode&&i!==this.wrapAll;){var s;if(o.hasAttr(i,"goto")){t.stopPropagation();var e=parseInt(o.attr(i,"goto"),10);this["goto"](e);break}if(o.hasAttr(i,"flayerbtn")){t.stopPropagation(),s=o.$(o.attr(i,"layerid")),s&&o.hide(s);break}if(o.hasAttr(i,"flayer")){t.stopPropagation(),o.show(i);break}if(o.hasAttr(i,"newhref")){t.stopPropagation();var n=o.attr(i,"newhref");window.open(n);break}if(o.hasAttr(i,"layerid")){t.stopPropagation(),s=o.$(o.attr(i,"layerid")),s&&o.show(s);break}if(o.hasAttr(i,"musicctrl")){t.stopPropagation(),this.bgMusicSwitch();break}if(o.hasClass(i,h.STATIC.flayerCls)){t.stopPropagation(),o.hide(i);break}i=i.parentNode}},"goto":function(t){this.curIndex=t,this.curGroups=o.getByClsName(h.STATIC.groupCls,this.slides[this.curIndex]),this.curGLen=this.curGroups.length,this.curGIndex=0,this.showCurSlide()}},h.prototype=o.mixin(h.prototype,l.prototype),h.utils=o,t.EasySlide=h}(window,document); -------------------------------------------------------------------------------- /src/EasySlide.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @author designsor@gmail.com 3 | * @date 20150730 4 | * @fileoverview 统一h5动画效果工具,不依赖zepto，用于h5 case by case业务 5 | */ 6 | (function(win, doc, undef) { 7 | 8 | var UA = navigator.userAgent; 9 | var toString = Object.prototype.toString; 10 | 11 | function isPhone6P(){ 12 | var isIos = /(iPhone|iOS)/i.test(navigator.userAgent); 13 | var is6P = window.screen.width === 414; 14 | return isIos && is6P; 15 | } 16 | 17 | var utils = { 18 | isPhone6P:isPhone6P(), 19 | $: function(id) { 20 | return doc.getElementById(id); 21 | }, 22 | getByTagName: function(tag, ele) { 23 | ele = ele || doc; 24 | return utils.makeElesArray(ele.getElementsByTagName(tag)); 25 | }, 26 | getByClsName: function(cls, ele) { 27 | ele = ele || doc; 28 | return utils.makeElesArray(ele.getElementsByClassName(cls)); 29 | }, 30 | makeElesArray: function(eles) { 31 | return Array.prototype.slice.call(eles); 32 | }, 33 | attr: function(ele, key, val) { 34 | if (val !== undef) { 35 | return ele.setAttribute(key, val); 36 | } else { 37 | return ele.getAttribute(key); 38 | } 39 | }, 40 | bind: function(ele, eventType, func) { 41 | ele.addEventListener(eventType, func, false); 42 | }, 43 | unbind: function(ele, eventType, func) { 44 | ele.removeEventListener(eventType, func, false); 45 | }, 46 | viewData: function() { 47 | var w = win, 48 | body = doc.body, 49 | dd = doc.documentElement, 50 | W = w.innerWidth || dd.clientWidth || body.clientWidth || 0, 51 | H = w.innerHeight || dd.clientHeight || body.clientHeight || 0; 52 | if(utils.isPhone6P){ 53 | W = dd.clientWidth; 54 | } 55 | return { 56 | "scrollTop": body.scrollTop || dd.scrollTop || w.pageYOffset, 57 | "scrollLeft": body.scrollLeft || dd.scrollLeft || w.pageXOffset, 58 | "documentWidth": Math.max(body.scrollWidth, dd.scrollWidth || 0), 59 | "documentHeight": Math.max(body.scrollHeight, dd.scrollHeight || 0, H), 60 | "viewWidth": W, 61 | "viewHeight": H 62 | }; 63 | }, 64 | remove: function(nid) { 65 | //删除某个节点 66 | if (nid && nid.nodeName) { 67 | nid.parentNode.removeChild(nid); 68 | } 69 | }, 70 | hide: function(ele) { 71 | ele.style.display = 'none'; 72 | }, 73 | show: function(ele) { 74 | ele.style.display = 'block'; 75 | }, 76 | hasAttr: function(ele, key) { 77 | return ele.hasAttribute(key); 78 | }, 79 | contain: function(ele, cls) { 80 | while (ele && ele.parentNode) { 81 | if (utils.hasClass(ele, cls)) { 82 | return ele; 83 | } 84 | ele = ele.parentNode; 85 | } 86 | return false; 87 | }, 88 | hasClass: function(ele, cls) { 89 | return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 90 | }, 91 | addClass: function(ele, cls) { 92 | if (!this.hasClass(ele, cls)) { 93 | ele.className += " " + cls; 94 | } 95 | }, 96 | removeClass: function(ele, cls) { 97 | if (this.hasClass(ele, cls)) { 98 | var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 99 | ele.className = ele.className.replace(reg, ' '); 100 | } 101 | }, 102 | isWeixin: function() { 103 | var match = UA.toLowerCase().match(/MicroMessenger/i); 104 | return match ? match[0] === "micromessenger" : false; 105 | }, 106 | shareWeibo: function(params) { 107 | var wbTitle = doc.title || params.title; 108 | var shareImg = params.shareImg || ''; 109 | var weiboreg = /weibo/i; 110 | if (weiboreg.test(UA)) { 111 | win.WeiboJSBridge.invoke("openMenu", {}, function() {}); 112 | } else { 113 | //wb_title为微博分享文案，share_img为分享图 114 | doc.location.href = 'http://share.sina.cn/callback?vt=4&title=' + encodeURIComponent(wbTitle) + '&pic=' + encodeURIComponent(shareImg) + '&url=' + encodeURIComponent(document.location.href); 115 | } 116 | }, 117 | mixin: function(sup, obj) { 118 | for (var i in obj) { 119 | if (obj.hasOwnProperty(i)) { 120 | sup[i] = obj[i]; 121 | } 122 | } 123 | return sup; 124 | }, 125 | transitionDurationToMilliseconds: function(duration) { 126 | var pieces = duration.match(/^([\d\.]+)(\w+)$/), 127 | time, unit, multiplier; 128 | 129 | if (pieces.length <= 1) { 130 | return duration; 131 | } 132 | 133 | time = pieces[1]; 134 | unit = pieces[2]; 135 | 136 | switch (unit) { 137 | case 'ms': 138 | multiplier = 1; 139 | break; 140 | case 's': 141 | multiplier = 1000; 142 | break; 143 | } 144 | return time * multiplier; 145 | }, 146 | isArray: function(v) { 147 | return toString.call(v) === '[object Array]'; 148 | }, 149 | isObject: function(v) { 150 | return toString.call(v) === '[object Object]'; 151 | }, 152 | isMobile: function() { 153 | try { 154 | document.createEvent("TouchEvent"); 155 | return true; 156 | } catch (e) { 157 | return false; 158 | } 159 | } 160 | }; 161 | 162 | var Events = function() { 163 | this.map = {}; 164 | }; 165 | 166 | Events.prototype = { 167 | constructor: Event, 168 | trigger: function(eventname, args) { 169 | if (this.map[eventname]) { 170 | this.map[eventname].forEach(function(fn) { 171 | fn.apply(this, args); 172 | }); 173 | } 174 | }, 175 | on: function(eventname, callback) { 176 | if (this.map[eventname]) { 177 | this.map[eventname].push(callback); 178 | } else { 179 | this.map[eventname] = [callback]; 180 | } 181 | }, 182 | off: function(eventname, callback) { 183 | if (callback) { 184 | if (this.map[eventname]) { 185 | this.map[eventname] = this.map[eventname].filter(function(func) { 186 | return func !== callback; 187 | }); 188 | } 189 | } else { 190 | this.map[eventname] = []; 191 | } 192 | } 193 | }; 194 | 195 | var swipeEvent = function(ele) { 196 | this.startX = 0; 197 | this.startY = 0; 198 | this.lastX = 0; 199 | this.lastY = 0; 200 | this.scrollEle = null; 201 | this.scrollEleDire = null; 202 | this.startTime = null; 203 | this.ele = ele; 204 | Events.call(this); 205 | this.bindSwipe(ele); 206 | }; 207 | 208 | swipeEvent.prototype = { 209 | constructor: swipeEvent, 210 | isScrollContain: function(ele) { 211 | while (ele && ele.parentNode) { 212 | if (utils.hasAttr(ele, 'scroll')) { 213 | return ele; 214 | } 215 | ele = ele.parentNode; 216 | } 217 | return null; 218 | }, 219 | bindSwipe: function(ele) { 220 | if (utils.isMobile()) { 221 | utils.bind(ele, "touchstart", this._touchstart.bind(this)); 222 | utils.bind(ele, "touchmove", this._touchmove.bind(this)); 223 | utils.bind(ele, "touchend", this._touchend.bind(this)); 224 | } else { 225 | var mousedown = this._touchstart.bind(this); 226 | var mousemove = this._touchmove.bind(this); 227 | var mouseup = this._touchend.bind(this); 228 | utils.bind(ele, "mousedown",function(e){ 229 | utils.bind(ele, "mousemove", mousemove); 230 | mousedown(e); 231 | }); 232 | utils.bind(ele, "mouseup", function(e){ 233 | utils.unbind(ele,"mousemove",mousemove); 234 | mouseup(e); 235 | }); 236 | } 237 | }, 238 | _touchstart: function(e) { 239 | if (e.touches && e.touches.length > 1) { 240 | //这里只允许单指操作 241 | return false; 242 | } 243 | this.scrollEle = null; 244 | this.scrollEleDire = null; 245 | this.startX = this.lastX = (utils.isMobile() ? e.touches[0].pageX : e.clientX); 246 | this.startY = this.lastY = (utils.isMobile() ? e.touches[0].pageY : e.clientY); 247 | this.startTime = Date.now(); 248 | if(this.disabled){ 249 | e.preventDefault(); 250 | } 251 | }, 252 | _touchmove: function(e) { 253 | var scrollEle = this.isScrollContain(e.target); 254 | var lastY = this.lastY = utils.isMobile() ? e.touches[0].pageY : e.clientY; 255 | var lastX = this.lastX = utils.isMobile() ? e.touches[0].pageX : e.clientX; 256 | if (e.touches && e.touches.length > 1) { 257 | return false; 258 | } 259 | if (scrollEle) { 260 | this.scrollEle = scrollEle; 261 | this.scrollEleDire = utils.attr(scrollEle, 'scroll'); 262 | return false; 263 | } 264 | var startX = this.startX; 265 | var startY = this.startY; 266 | var absX = Math.abs(this.lastX - this.startX); 267 | var absY = Math.abs(this.lastY - this.startY); 268 | var moveTime = Date.now() - this.startTime; 269 | var direc = absX > absY ? "X" : "Y"; 270 | var positive = { 271 | x: lastX - startX >= 0 ? 1 : -1, 272 | y: lastY - startY >= 0 ? 1 : -1 273 | }; 274 | this.trigger('swipeMove', [this.slides, { 275 | moveTime: moveTime, 276 | positive: positive, 277 | direc: direc, 278 | moveX: absX, 279 | moveY: absY, 280 | startX: startX, 281 | startY: startY, 282 | lastX: lastX, 283 | lastY: lastY 284 | }, e.target]); 285 | e.preventDefault(); 286 | }, 287 | _touchend: function(e) { 288 | 289 | var target = e.target; 290 | var absX = Math.abs(this.lastX - this.startX); 291 | var absY = Math.abs(this.lastY - this.startY); 292 | var dragDirec = absX > absY ? "x" : "y"; 293 | var of = 20; 294 | if ((dragDirec === "x" && absX < of) || (dragDirec === "y" && absY < of)) { 295 | return false; 296 | } 297 | 298 | if (dragDirec !== this.swipeDirection) { 299 | this.trigger('dragDirecNotEqual'); 300 | } 301 | 302 | var swipe = dragDirec === 'y' ? 'swipeY' : 'swipeX'; 303 | var direction = dragDirec === 'y' ? (this.lastY < this.startY ? 1 : -1) : (this.lastX < this.startX ? 1 : -1); 304 | 305 | if (this.scrollEle && this.scrollEleDire === dragDirec) { 306 | 307 | var scrollTopLeft = this.scrollEleDire === 'y' ? this.scrollEle.scrollTop : this.scrollEle.scrollLeft; 308 | var eleHW = this.scrollEleDire === 'y' ? this.scrollEle.clientHeight : this.scrollEle.clientWidth; 309 | var scrollHW = this.scrollEleDire === 'y' ? this.scrollEle.scrollHeight : this.scrollEle.scrollWidth; 310 | 311 | if (eleHW + scrollTopLeft + 10 >= scrollHW) { 312 | this.trigger(swipe, [1, target]); 313 | } else if (scrollTopLeft < 10) { 314 | this.trigger(swipe, [-1, target]); 315 | } 316 | return false; 317 | } 318 | 319 | 320 | var lastY = this.lastY; 321 | var lastX = this.lastX; 322 | var startY = this.startY; 323 | var startX = this.startX; 324 | this.trigger('swipeEnd',[{ 325 | lastY:lastY, 326 | startY:startY, 327 | lastX:lastX, 328 | startX:startX 329 | }]); 330 | if (this.disabled) { 331 | return false; 332 | } 333 | this.trigger(swipe, [direction, target]); 334 | this.startX = this.startY = this.lastX = this.lastY = 0; 335 | } 336 | }; 337 | 338 | swipeEvent.prototype = utils.mixin(swipeEvent.prototype, Events.prototype); 339 | 340 | 341 | var EasySlide = function(config) { 342 | 343 | this.slides = []; 344 | this.slidesLen = 0; 345 | this.curIndex = 0; 346 | 347 | this.curGroups = []; 348 | this.curGLen = 0; 349 | this.curGIndex = 0; 350 | 351 | this.disabled = false; 352 | 353 | this.subppt = []; 354 | this.subpptNum = []; //哪些slide是有左右滑动的子ppt的 355 | 356 | var defaultConfig = { 357 | margin: 0, 358 | backgroungMusic: null, 359 | transition: 'all 0.5s ease', 360 | firstTime: true, 361 | animateEffect: 'default', 362 | swipeDirection: 'y', 363 | replay: false, 364 | wrapAll: '' 365 | }; 366 | 367 | utils.mixin(defaultConfig, config); 368 | utils.mixin(this, defaultConfig); 369 | 370 | this.wrapAll = utils.$(this.wrapAll); 371 | swipeEvent.call(this, this.wrapAll); 372 | this.bgMusicPlaying = false; 373 | this.init(); 374 | }; 375 | 376 | EasySlide.STATIC = { 377 | flayerCls: 'EasySlide-flayer', 378 | flayerTriggerCls: 'EasySlide-triggerLayer', 379 | animateCls: 'EasySlide-animate', 380 | groupCls: 'EasySlide-groups', 381 | slideCls: 'EasySlide-slides' 382 | }; 383 | 384 | EasySlide.animationEffects = { 385 | 'default': function(ele, axis, offsetEnd, setTransition) { 386 | if (setTransition) { 387 | ele.style["-webkit-transition"] = this.transition; 388 | } 389 | ele.style["-webkit-transform"] = 'translateZ(0) translate' + axis + '(' + offsetEnd + 'px)'; 390 | } 391 | }; 392 | 393 | EasySlide.prototype = { 394 | constructor: EasySlide, 395 | bindEvent: function() { 396 | utils.bind(this.wrapAll, "click", this._click.bind(this)); 397 | //绑在touchend上，操作才灵敏 398 | this.on('swipeY', this.allowSwipeY.bind(this)); 399 | this.on('swipeX', this.allowSwipeX.bind(this)); 400 | //会触发2次动画 401 | //utils.bind(win, "load", this.resize.bind(this)); 402 | utils.bind(win, "resize", this.resize.bind(this)); 403 | utils.bind(win, "scroll", function(e) { 404 | e.preventDefault(); 405 | }); 406 | }, 407 | renderSlide: function() { 408 | this.slides = utils.getByClsName(EasySlide.STATIC.slideCls, this.wrapAll); 409 | this.slidesLen = this.slides.length; 410 | this.curGroups = utils.getByClsName(EasySlide.STATIC.groupCls, this.slides[0]); 411 | this.curGLen = this.curGroups.length; 412 | this.showCurSlide(); 413 | }, 414 | init: function() { 415 | 416 | this.initSlides(this.wrapAll); 417 | 418 | this.renderSlide(); 419 | 420 | this.bindEvent(); 421 | 422 | if (this.subpptObjects) { 423 | if (!EasySlide.Subppt) { 424 | throw new Error('must have ppt.js!'); 425 | } else { 426 | this.initSubPPT(this.subpptObjects); 427 | } 428 | } 429 | }, 430 | initSlides: function(wrap) { 431 | this.vW = this.width || utils.viewData().viewWidth; 432 | this.vH = this.height || utils.viewData().viewHeight; 433 | wrap.style.height = this.vH + "px"; 434 | wrap.style.width = this.vW + "px"; 435 | }, 436 | setBgMusic: function() { 437 | if (this.backgroungMusic) { 438 | var url = this.backgroungMusic; 439 | var audio = doc.createElement('audio'); 440 | audio.loop = "loop"; 441 | this.music = audio; 442 | this.trigger('beforeMusicStart', [this.music]); 443 | audio.src = url; 444 | this.trigger('musicStart', [this.music]); 445 | doc.body.appendChild(audio); 446 | } 447 | }, 448 | bgMusicPlay: function() { 449 | if (this.music) { 450 | this.bgMusicPlaying = true; 451 | this.music.play(); 452 | this.trigger('musicPlay', [this.music]); 453 | } 454 | }, 455 | bgMusicPause: function() { 456 | if (this.music) { 457 | this.bgMusicPlaying = false; 458 | this.music.pause(); 459 | this.trigger('musicPause', [this.music]); 460 | } 461 | }, 462 | bgMusicSwitch: function() { 463 | if (this.music) { 464 | if (!this.bgMusicPlaying) { 465 | this.bgMusicPlay(); 466 | } else { 467 | this.bgMusicPause(); 468 | } 469 | } 470 | }, 471 | resize: function() { 472 | var self = this; 473 | setTimeout(function(){ 474 | self.initSlides(self.wrapAll); 475 | self.showCurSlide(); 476 | },100); 477 | }, 478 | getEffects: function(el) { 479 | return utils.attr(el, 'effect') || this.animateEffect; 480 | }, 481 | setYPos: function(el, posY) { //设置slide的竖直方向位置 482 | var effect = this.getEffects(el); 483 | EasySlide.animationEffects[effect].call(this, el, 'Y', posY, true); 484 | }, 485 | setXPos: function(el, posX) { //设置slide的竖直方向位置 486 | var effect = this.getEffects(el); 487 | EasySlide.animationEffects[effect].call(this, el, 'X', posX, true); 488 | }, 489 | removeAnimation: function(el) { 490 | el.style['-webkit-animation'] = ""; 491 | el.offsetWidth = el.offsetWidth; 492 | }, 493 | setAnimation: function(el, animation) { 494 | el.style["-webkit-animation"] = animation.name + " " + animation.duration + " " + animation.tfunction + " " + animation.delay + " " + animation.iteration + " normal forwards"; 495 | }, 496 | setAnimationAttr: function(div) { 497 | var attr = utils.attr, 498 | style = div.style, 499 | attrs = { 500 | 'in': attr(div, "in") || style['-webkit-animation-name'] || '', 501 | duration: attr(div, "duration") || style['-webkit-animation-duration'] || '', 502 | tfunction: attr(div, "tfunction") || style['-webkit-timing-function'] || '', 503 | delay: attr(div, "delay") || style['-webkit-animation-delay'] || '', 504 | iteration: attr(div, "iteration") || style['-webkit-iteration-count'] || '' 505 | }; 506 | for (var i in attrs) { 507 | if (attrs[i] !== '' && attrs[i] !== null) { 508 | attr(div, i, attrs[i]); 509 | } 510 | } 511 | }, 512 | showSlide: function() { 513 | var self = this; 514 | 515 | this.slides.forEach(function(slide) { 516 | 517 | var tIndex = parseInt(utils.attr(slide, "index"), 10); 518 | var isEnd = self.curIndex === self.slidesLen - 1 && tIndex === 0; 519 | var isFirst = self.curIndex === 0 && tIndex === self.slidesLen - 1; 520 | var isCur = tIndex === self.curIndex; 521 | var isNext = tIndex === self.curIndex + 1; 522 | var isPrev = tIndex === self.curIndex - 1; 523 | var y = isCur ? 0 : null; 524 | var x = isCur ? 0 : null; 525 | 526 | if (isNext || isEnd) { 527 | y = self.vH + self.margin; 528 | x = self.vW + self.margin; 529 | } else if (isPrev || isFirst) { 530 | y = -self.vH - self.margin; 531 | x = -self.vW - self.margin; 532 | } 533 | 534 | if (isCur || isNext || isPrev || isEnd || isFirst) { 535 | if (self.swipeDirection === 'y') { 536 | self.setYPos(slide, y); 537 | } else if (self.swipeDirection === 'x') { 538 | self.setXPos(slide, x); 539 | } 540 | utils.show(slide); 541 | } else { 542 | utils.hide(slide); 543 | } 544 | 545 | }); 546 | }, 547 | showCurSlide: function() { 548 | var self = this; 549 | var attr = utils.attr; 550 | 551 | this.trigger('beforeShowSlide', [allowswipe,this.curGroups]); 552 | this.showSlide(); 553 | 554 | this.curGroups.forEach(function(group) { 555 | var tIndex = parseInt(utils.attr(group, "gIndex"), 10); 556 | //处理当前slide下面的groups的展示 557 | if (tIndex === self.curGIndex) { 558 | utils.show(group); 559 | var animateDivs = utils.getByClsName(EasySlide.STATIC.animateCls, group); 560 | animateDivs.forEach(self.setAnimationAttr); 561 | if (self.replay) { 562 | animateDivs.forEach(self.removeAnimation); 563 | } 564 | animateDivs.forEach(function(div) { 565 | //如果webkit-animation有动画需要赋值 566 | self.setAnimation(div, { 567 | name: attr(div, "in"), 568 | duration: attr(div, "duration") || ".5s", 569 | tfunction: attr(div, "tfunction") || "ease", 570 | delay: attr(div, "delay") || 0, 571 | iteration: attr(div, "iteration") || 1 572 | }); 573 | }); 574 | self.trigger('showCurSlide',[group]); 575 | } else { 576 | //动画执行完毕再隐藏 577 | utils.hide(group); 578 | } 579 | }); 580 | var allowswipe = this.getCurAllowSwipe(); //获得该针是否允许上下滑动 581 | this.trigger('slide-switchEnd', [allowswipe,this.curGroups]); 582 | }, 583 | getCurAllowSwipe: function() { 584 | return utils.attr(this.curGroups[this.curGIndex], "allowswipe"); //获得该针是否允许上下滑动 585 | }, 586 | allowSwipeY: function(direction) { 587 | this.allowSwipe(direction, 'y'); 588 | }, 589 | allowSwipeX: function(direction, target) { 590 | var subindex = this.subpptNum.indexOf(this.curIndex); 591 | if (subindex !== -1 && utils.contain(target, EasySlide.Subppt.STATIC.imgWrapCls)) { //如果此页有子ppt 592 | this.subppt[subindex].move(direction); 593 | this.trigger('ppt-switchEnd'); 594 | return; 595 | } 596 | this.allowSwipe(direction, 'x'); 597 | }, 598 | allowSwipe: function(direction, swipeDirection) { 599 | var allowswipe = this.getCurAllowSwipe(); //获得该针是否允许上下滑动 600 | if ((!allowswipe || allowswipe === "next" || allowswipe === 'prev') && this.swipeDirection === swipeDirection) { 601 | if ((allowswipe === 'next' && direction === 1) || (allowswipe === 'prev' && direction === -1) || allowswipe === null) { 602 | this.move(direction); 603 | } 604 | } 605 | }, 606 | move: function(direction) { 607 | var directions = { 608 | '1': function() { 609 | if (this.curGIndex < this.curGLen - 1) { 610 | this.curGIndex++; 611 | } else { 612 | this.curIndex++; 613 | if (this.curIndex >= this.slidesLen) { 614 | this.curIndex = 0; 615 | } 616 | if (this.curIndex === this.slidesLen - 1) { 617 | this.firstTime = false; //看到最后一页了 618 | } 619 | this.curGroups = utils.getByClsName(EasySlide.STATIC.groupCls, this.slides[this.curIndex]); 620 | this.curGLen = this.curGroups.length; 621 | this.curGIndex = 0; 622 | } 623 | }, 624 | '-1': function() { 625 | if (this.curGIndex > 0) { 626 | this.curGIndex--; 627 | } else { 628 | this.curIndex--; 629 | if (this.curIndex < 0) { 630 | if (this.firstTime) { 631 | this.curIndex = 0; 632 | } else { 633 | this.curIndex = this.slidesLen - 1; 634 | } 635 | } 636 | this.curGroups = utils.getByClsName(EasySlide.STATIC.groupCls, this.slides[this.curIndex]); 637 | this.curGLen = this.curGroups.length; 638 | this.curGIndex = this.curGLen - 1; 639 | } 640 | } 641 | }; 642 | directions[direction].call(this); 643 | this.showCurSlide(); 644 | }, 645 | _click: function(e) { 646 | //处理各种逻辑，包括跳转、出浮层、浮层消失等 647 | var target = e.target; 648 | while (target && target.parentNode && target !== this.wrapAll) { 649 | var tLayer; 650 | if (utils.hasAttr(target, "goto")) { 651 | //所有的大frame之间的跳转 652 | e.stopPropagation(); 653 | var tGoIndex = parseInt(utils.attr(target, "goto"), 10); 654 | this.goto(tGoIndex); 655 | break; 656 | } else if (utils.hasAttr(target, 'flayerbtn')) { 657 | e.stopPropagation(); 658 | tLayer = utils.$(utils.attr(target, "layerid")); 659 | if (tLayer) { 660 | utils.hide(tLayer); 661 | } 662 | break; 663 | } else if (utils.hasAttr(target, "flayer")) { 664 | e.stopPropagation(); 665 | utils.show(target); 666 | break; 667 | } else if (utils.hasAttr(target, 'newhref')) { 668 | e.stopPropagation(); 669 | var newhref = utils.attr(target, "newhref"); 670 | window.open(newhref); 671 | break; 672 | } else if (utils.hasAttr(target, 'layerid')) { 673 | //所有点击出浮层 674 | e.stopPropagation(); 675 | tLayer = utils.$(utils.attr(target, "layerid")); 676 | if (tLayer) { 677 | utils.show(tLayer); 678 | } 679 | break; 680 | } else if (utils.hasAttr(target, 'musicctrl')) { 681 | e.stopPropagation(); 682 | this.bgMusicSwitch(); 683 | break; 684 | } else if (utils.hasClass(target, EasySlide.STATIC.flayerCls)) { 685 | //浮层点击消失 686 | e.stopPropagation(); 687 | utils.hide(target); 688 | break; 689 | } 690 | target = target.parentNode; 691 | } 692 | }, 693 | goto: function(index) { 694 | //直接跳转到某个大slide 695 | this.curIndex = index; 696 | //换大的slide了，自然需要换一组新的groups 697 | this.curGroups = utils.getByClsName(EasySlide.STATIC.groupCls, this.slides[this.curIndex]); 698 | this.curGLen = this.curGroups.length; 699 | this.curGIndex = 0; 700 | this.showCurSlide(); 701 | } 702 | }; 703 | 704 | EasySlide.prototype = utils.mixin(EasySlide.prototype, swipeEvent.prototype); 705 | 706 | EasySlide.utils = utils; 707 | 708 | win.EasySlide = EasySlide; 709 | 710 | })(window, document); 711 | -------------------------------------------------------------------------------- /demo/yoga.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 致⋅极致 / 透视巴塞尔表展，腕表不仅为计时存在... 9 | 10 | 11 | 12 | 13 | 14 | 134 | 135 | 136 |
137 |
138 | 148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
联想YOGA 3 Pro笔记本为全球最薄的多模笔记本，独有酷炫的表链转轴，360°顺畅翻转，自由随心，为用户带来极致的使用体验。

YOGA 3 Pro是工业和艺术的结合。腕表是手工和艺术的结合，他们二者都凝聚着工业设计的智慧和匠心，让每个得到它们的人都说“WOW”！
179 |
此品牌参加
日内瓦表展
全球最纤薄机械腕表，将手动上炼机芯媒合以表壳元素，真正一体成型的单一实体，缔造破纪录的3.65mm纤薄成就。
180 |
此品牌参加
日内瓦表展
搭载的是世界上最纤薄的1.38毫米机芯的超薄怀表，即便你穿着贴身合体的西装，它也不会带来一丝累赘感。
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
YOGA 3 Pro别出心裁的转轴设计，呈现出流畅简洁的现代感线条，其精致细腻的转动过程，堪称惊艳。人们对美感的极致追求，也是腕表设计师们所追求的，这样便诞生了让腕表更美的装饰性工艺。
197 |
此品牌参加
巴塞尔表展
缠绕式表链上的鳞片以展现建筑几何美学的抛光金属代替。每一节表链均天衣无缝的连接在一起。在BVLGARI宝格丽的经典风格中，表链有力的线条与圆形表壳的华丽完美平衡。
198 |
此品牌参加
巴塞尔表展
浪琴表认为简约、经典的设计是“优雅”的最佳体现，精致的链节线条流畅，营造出优雅轻盈的视觉效果 。
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
对于细节的追求，是每一个成功品牌都会重视的。YOGA 3 Pro充分说明了这一点，采用超静音、全球最薄的散热风扇有效的保障性能的前提下使机身更加纤薄。

同样在腕表领域，小到一颗螺丝，制表师都会亲自手工打磨。为了不让机芯单调，光是机芯上的纹饰打磨便有不下十种。做这些的目的，不光是为了保证产品的质量，更是对消费者的负责与尊重。
216 |
此品牌参加
日内瓦表展
朗格表的机芯会进行两次组装，第一次看运转是否流畅；拆解后清洗、修饰再二次组装。朗格对极致细节的追求在钟表领域极为罕见。
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
YOGA 3 Pro高性能的中央处理器以及超长待机时间，其根本是对技术工艺的创新和探索，同样也是对极致品质的追求。

在腕表里，同样对工艺技术方面有极致追求，如提高腕表走时精准性的高频表以及超长的动力储备功能腕表，在提高腕表的性能之外，也完美展现了品牌对工艺技术方面的极致追求。
233 |
此品牌参加
巴塞尔表展
腕表频率越高，走时越精准。真力时El Primero一直标榜是世界上最精准的计时码表，其特点是高频振动。
234 |
此品牌参加
巴塞尔表展
动力让机械表可以走时。长动力储备实用且方便。此款宇舶表动力达50天，创了手动上链陀飞轮腕表动力储存的记录。
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
再看一遍
245 |
分享到微博
246 |
分享到微信
247 |
248 |
249 |
250 |
251 |
252 |
253 |
侯虹斌
对于现在的中国人来说“越是世界的，才越是民族的”。
254 |
胡颖
价值连城的珠宝钟表的背后，永恒不变的价值追求到底是什么。
255 |
陈根
今年的巴展是一次时尚与科技的融合，传统技术与现代科技的较量。
256 |
陈晓
别以为戴一块好表就自认金石掷地有声，戴表也是一件要讲心机的事。
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
建议在wifi环境下浏览
加载中，请稍后
0%
271 | 272 | 342 | 343 | --------------------------------------------------------------------------------