├── sass ├── border-1px │ ├── _base.scss │ ├── _mixin.scss │ └── _media.scss ├── print.scss ├── ie.scss └── scrollmenu.scss ├── fonts ├── icomoon.eot ├── icomoon.ttf ├── icomoon.woff ├── fontCss.css └── icomoon.svg ├── .sass-cache ├── 9a7969496af1aec9a186c1b1762acda1b77db0b0 │ ├── print.scssc │ ├── scrollmenu.scssc │ ├── ie.scssc │ └── screen.scssc ├── 3746710bfe7e0b2975954c3a0118ba047eb1860b │ ├── _filter.scssc │ ├── _images.scssc │ ├── _animation.scssc │ ├── _columns.scssc │ ├── _flexbox.scssc │ ├── _font-face.scssc │ ├── _opacity.scssc │ ├── _regions.scssc │ ├── _transform.scssc │ ├── _box-shadow.scssc │ ├── _box-sizing.scssc │ ├── _hyphenation.scssc │ ├── _text-shadow.scssc │ ├── _transition.scssc │ ├── _border-radius.scssc │ ├── _inline-block.scssc │ ├── _user-interface.scssc │ ├── _background-clip.scssc │ ├── _background-size.scssc │ ├── _background-origin.scssc │ ├── _deprecated-support.scssc │ └── _appearance.scssc ├── 595fac6b687c9031debfb4ea4c8b3511cc17aba3 │ └── _hacks.scssc ├── c97bce9918b87dbc9aadc31ef7192d7957d57e0a │ ├── _media.scssc │ ├── _mixin.scssc │ └── _base.scssc ├── 8f94eb898a9783786c406a84806e4fc94c68aa1c │ └── _ellipsis.scssc ├── b4dc5ef3282a087fe58bacd7d9b56433752b3ac9 │ ├── _support.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ └── _css3.scssc ├── f20dab5b7fb1216f35d8484ebb92bc8dca57139a │ └── _utilities.scssc ├── 3aa8e0230493eb6fd1c3680539c42b9bb329e1c6 │ ├── _stretching.scssc │ ├── _sticky-footer.scssc │ └── _grid-background.scssc ├── 79db1df0af0471c2664c612e8a6fdc3832f23fae │ └── _link-colors.scssc └── 75fcaf1b4852ceb732871195e41567cc2a7d8997 │ └── C%058 │ └── Ruby22-x64 │ └── lib │ └── ruby │ └── gems │ └── 2.2.0 │ └── gems │ └── compass-core-1.0.3 │ └── stylesheets │ └── compass │ ├── _support.scssc │ └── css3 │ ├── _images.scssc │ └── _background-size.scssc ├── css ├── print.css ├── ie.css ├── scrollMenu.css └── animate.css ├── config.rb ├── README.md ├── index.html └── js ├── scrollmenu.js └── bscroll.js /sass/border-1px/_base.scss: -------------------------------------------------------------------------------- 1 | @import '_mixin.scss'; 2 | @import '_media.scss'; -------------------------------------------------------------------------------- /fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/fonts/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/fonts/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/fonts/icomoon.woff -------------------------------------------------------------------------------- /.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/print.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/print.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc -------------------------------------------------------------------------------- /.sass-cache/c97bce9918b87dbc9aadc31ef7192d7957d57e0a/_media.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/c97bce9918b87dbc9aadc31ef7192d7957d57e0a/_media.scssc -------------------------------------------------------------------------------- /.sass-cache/c97bce9918b87dbc9aadc31ef7192d7957d57e0a/_mixin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/c97bce9918b87dbc9aadc31ef7192d7957d57e0a/_mixin.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc -------------------------------------------------------------------------------- /.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc -------------------------------------------------------------------------------- /.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/scrollmenu.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/scrollmenu.scssc -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc -------------------------------------------------------------------------------- /.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc -------------------------------------------------------------------------------- /.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/scrollmenu/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc -------------------------------------------------------------------------------- /css/print.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /sass/print.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /sass/ie.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /sass/border-1px/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin border-1px($color){ 2 | position:relative; 3 | &:after{ 4 | display: block; 5 | width: 100%; 6 | position:absolute; 7 | background: $color!important; 8 | left: 0; 9 | bottom: 0; 10 | border-top:1px solid $color!important; 11 | content: ''; 12 | } 13 | } 14 | 15 | @mixin border-none(){ 16 | &:after{ 17 | display: none; 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /sass/border-1px/_media.scss: -------------------------------------------------------------------------------- 1 | @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ 2 | .border-1px{ 3 | &::after{ 4 | @include scaleY(0.65); 5 | } 6 | } 7 | } 8 | 9 | @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ 10 | .border-1px{ 11 | &::after{ 12 | @include scaleY(0.5); 13 | } 14 | } 15 | } 16 | 17 | @media (-webkit-min-device-pixel-ratio:2.5),(min-device-pixel-ratio:2.5){ 18 | .border-1px{ 19 | &::after{ 20 | @include scaleY(0.4); 21 | } 22 | } 23 | } 24 | 25 | @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ 26 | .border-1px{ 27 | &::after{ 28 | @include scaleY(0.33); 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"o(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"s(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"|(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/c97bce9918b87dbc9aadc31ef7192d7957d57e0a/_base.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | db27df0caa08da1096b8e0cc9c49385e211609eb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"_mixin.scss:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"7E:/myProject/scrollmenu/sass/border-1px/_base.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"E:/myProject/scrollmenu; T:@real_rootI"E:/myProject/scrollmenu; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"_media.scss; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0; 10 | 0; @ 11 | ; I"2@import '_mixin.scss'; 12 | @import '_media.scss';; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | df78759f0fe6b88a633d20d26581ca4cdb829111 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"reset/utilities:ET;[:@filename0: @options{:@template0:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position: 4 | @linei: @offseti: @end_poso;;i;i: 5 | @fileI"^C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{;i:@imported_file0o:Sass::Tree::MixinNode: 8 | @nameI"global-reset; T: 9 | @args[:@keywords{: @splat0:@kwarg_splat0;[; 10 | 0; @ 11 | ;i; o; ;o;;i;i;o;;i;i;@;@; 12 | 0; @ 13 | ; I"8@import "reset/utilities"; 14 | 15 | @include global-reset; 16 | ; T:@has_childrenT;i; o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | bbe8b1b9b6592e6ce6a7294fd0249c75049d3024 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"layout/grid-background:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i&: 5 | @fileI"_C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"layout/sticky-footer; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"layout/stretching; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 12 | 0; @ 13 | ; I"d@import "layout/grid-background"; 14 | @import "layout/sticky-footer"; 15 | @import "layout/stretching"; 16 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 预览地址 2 | http://daiwei.org/components/scrollmenu/ 3 | 4 | # scrollmenu 5 | 这是关于弹出关闭可滚动的菜单效果 兼容pc、移动端 6 | 7 | * height: //菜单栏的高度 8 | * zIndex: //层级 9 | * background:   //背景色 10 | * type: //cross or ''   横向列表  和 正常显示的效果   具体见下方链接 11 | * animateIn:     //菜单进入的效果    可使用animate.css 12 | * animateOut:     //菜单关闭的效果 13 | * duration:           //动画执行时间 14 | * hasLineBorder:     //是否显示一像素边框分割 15 | * bscroll:             //是否使用bScroll的 滚动方式 16 | * showRightIcon: //横向列表下是否显示右侧图标 17 | * iconSIze:           //图标大小 18 | * source:             //列表的信息 19 | * title:             //source  下的子属性    菜单名称 20 | * hasHref:           //source  下的子属性    是否有链接 21 | * href:               //source  下的子属性    链接地址 22 | * font_imgClass:     //source  下的子属性    图标的class名称 23 | * hrefType:           //source  下的子属性   //_self , _blank, _parent, _top   打开的类型 24 | * rightFont_imgClass: //source  下的子属性   //横向列表状态下 右侧的图标信息 25 | * click:function(ret){}     //列表被点击时候的方法   ret.ele  点击的元素   ret.hasHref  是否有链接  ret.index  点击的索引   ret.title   文本内容   ret.icon_class   图标的class名称 26 | 27 | * ### 注意：'-hastrans'是我在animate.css的基础上加的,目的是当元素为绝对定位又想用translate居中时候,修改translate的值无效,故做了一些修改,之前的class也可以正常使用 28 | 29 | -------------------------------------------------------------------------------- /.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI")E:/myProject/scrollmenu/sass/ie.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/myProject/scrollmenu; T:@real_rootI"E:/myProject/scrollmenu; T:@same_name_warningso:Set: 13 | @hash{; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/9a7969496af1aec9a186c1b1762acda1b77db0b0/screen.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | e24c39d4800ce9f9b6b50e6a9d2d8c3fce9d548f 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I" /* Welcome to Compass. 4 | * In this file you should write your main styles. (or centralize your imports) 5 | * Import this file using the following HTML or equivalent: 6 | * */:ET: 7 | @type: normal;[:@filename0: @options{: 8 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i ;io: 9 | @fileI"-E:/myProject/scrollmenu/sass/screen.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 10 | @rootI"E:/myProject/scrollmenu; T:@real_rootI"E:/myProject/scrollmenu; T:@same_name_warningso:Set: 11 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/reset; T;[; 0; @ :@template0;o; ;o;;i ;i;o;;i ;i;@;@;i :@imported_file0; 0; @ ;!I"'/* Welcome to Compass. 12 | * In this file you should write your main styles. (or centralize your imports) 13 | * Import this file using the following HTML or equivalent: 14 | * */ 15 | 16 | @import "compass/reset"; 17 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /fonts/fontCss.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('icomoon.eot?dt30lq'); 4 | src: url('icomoon.eot?dt30lq#iefix') format('embedded-opentype'), 5 | url('icomoon.ttf?dt30lq') format('truetype'), 6 | url('icomoon.woff?dt30lq') format('woff'), 7 | url('icomoon.svg?dt30lq#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="dw-icon-"], [class*=" dw-icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .dw-icon-add:before { 28 | content: "\e900"; 29 | } 30 | .dw-icon-android:before { 31 | content: "\e901"; 32 | } 33 | .dw-icon-apple:before { 34 | content: "\e902"; 35 | } 36 | .dw-icon-close:before { 37 | content: "\e903"; 38 | } 39 | .dw-icon-down:before { 40 | content: "\e904"; 41 | } 42 | .dw-icon-erweicode:before { 43 | content: "\e905"; 44 | } 45 | .dw-icon-left:before { 46 | content: "\e906"; 47 | } 48 | .dw-icon-like:before { 49 | content: "\e907"; 50 | } 51 | .dw-icon-list:before { 52 | content: "\e908"; 53 | } 54 | .dw-icon-money:before { 55 | content: "\e909"; 56 | } 57 | .dw-icon-music:before { 58 | content: "\e90a"; 59 | } 60 | .dw-icon-next:before { 61 | content: "\e90b"; 62 | } 63 | .dw-icon-novoice:before { 64 | content: "\e90c"; 65 | } 66 | .dw-icon-off:before { 67 | content: "\e90d"; 68 | } 69 | .dw-icon-password:before { 70 | content: "\e90e"; 71 | } 72 | .dw-icon-pause:before { 73 | content: "\e90f"; 74 | } 75 | .dw-icon-play:before { 76 | content: "\e910"; 77 | } 78 | .dw-icon-prev:before { 79 | content: "\e911"; 80 | } 81 | .dw-icon-qq:before { 82 | content: "\e912"; 83 | } 84 | .dw-icon-reduce:before { 85 | content: "\e913"; 86 | } 87 | .dw-icon-right:before { 88 | content: "\e914"; 89 | } 90 | .dw-icon-search:before { 91 | content: "\e915"; 92 | } 93 | .dw-icon-share:before { 94 | content: "\e916"; 95 | } 96 | .dw-icon-tag:before { 97 | content: "\e917"; 98 | } 99 | .dw-icon-up:before { 100 | content: "\e918"; 101 | } 102 | .dw-icon-user:before { 103 | content: "\e919"; 104 | } 105 | .dw-icon-voice:before { 106 | content: "\e91a"; 107 | } 108 | .dw-icon-wechat:before { 109 | content: "\e91b"; 110 | } 111 | .dw-icon-weibo:before { 112 | content: "\e91c"; 113 | } 114 | .dw-icon-windows:before { 115 | content: "\e91d"; 116 | } 117 | .dw-icon-zan:before { 118 | content: "\e91e"; 119 | } 120 | .dw-icon-zan-empty:before { 121 | content: "\e91f"; 122 | } 123 | 124 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | ff2e5c1b784cd29f2321d28a68782dc7c9611f46 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"css3/border-radius:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i": 5 | @fileI"]C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"css3/inline-block; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0o; ;I"css3/opacity; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/box-shadow; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/text-shadow; T;[; 14 | 0; @ 15 | ; 0; i 16 | ;o; ;o;; i 17 | ;i;o;; i 18 | ;i ;@;@;0o; ;I"css3/columns; T;[; 19 | 0; @ 20 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/box-sizing; T;[; 21 | 0; @ 22 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/flexbox; T;[; 23 | 0; @ 24 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/images; T;[; 25 | 0; @ 26 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/background-clip; T;[; 27 | 0; @ 28 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/background-origin; T;[; 29 | 0; @ 30 | ; 0; i;o; ;o;; i;i;o;; i;i&;@;@;0o; ;I"css3/background-size; T;[; 31 | 0; @ 32 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/font-face; T;[; 33 | 0; @ 34 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transform; T;[; 35 | 0; @ 36 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transition; T;[; 37 | 0; @ 38 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/appearance; T;[; 39 | 0; @ 40 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/animation; T;[; 41 | 0; @ 42 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/regions; T;[; 43 | 0; @ 44 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/hyphenation; T;[; 45 | 0; @ 46 | ; 0; i;o; ;o;; i;i;o;; i;i ;@;@;0o; ;I"css3/filter; T;[; 47 | 0; @ 48 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/user-interface; T;[; 49 | 0; @ 50 | ; 0; i;o; ;o;; i;i;o;; i;i#;@;@;0; 51 | 0; @ 52 | ; I"<@import "css3/border-radius"; 53 | @import "css3/inline-block"; 54 | @import "css3/opacity"; 55 | @import "css3/box-shadow"; 56 | @import "css3/text-shadow"; 57 | @import "css3/columns"; 58 | @import "css3/box-sizing"; 59 | @import "css3/flexbox"; 60 | @import "css3/images"; 61 | @import "css3/background-clip"; 62 | @import "css3/background-origin"; 63 | @import "css3/background-size"; 64 | @import "css3/font-face"; 65 | @import "css3/transform"; 66 | @import "css3/transition"; 67 | @import "css3/appearance"; 68 | @import "css3/animation"; 69 | @import "css3/regions"; 70 | @import "css3/hyphenation"; 71 | @import "css3/filter"; 72 | @import "css3/user-interface"; 73 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_appearance.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 8c228e867e069d1b52ae586e30be356946cddfdf 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Appearance */:ET: 4 | @type: silent;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"hC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_appearance.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 8 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/support; T;[; 0; @ :@template0;i;o; ;o;;i;i;o;;i;i;@;@:@imported_file0o; ;[I"6/* Change the appearance for Mozilla, Webkit and possibly the future. 9 | * The appearance property is currently not present in any newer CSS specification. 10 | * 11 | * There is no official list of accepted values, but you might check these source: 12 | * 13 | * * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 14 | * * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 15 | * (search for 'appearance' within the page) */; T; 16 | ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i;i6;@;@o:Sass::Tree::MixinDefNode: 17 | @nameI"appearance; T: 18 | @args[[o:!Sass::Script::Tree::Variable ;#I"appearance; T:@underscored_nameI"appearance; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i#;@;@; @; @ 0: @splat0;[ o; ;[I"7/* There is no caniuse tracking for appearance. */; T; 19 | ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i7;@;@o:Sass::Tree::VariableNode;#I"appearance; T: 20 | @expro: Sass::Script::Tree::Funcall;#I" unquote; T;$[o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i;o;;i;i(;@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;'0;i;o; ;o;;i;i;o;;i;i);@;@; @; @ : @guarded0: @global0;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i);@;@o:Sass::Tree::MixinNode;#I"with-prefix; T;$[o: Sass::Script::Tree::Literal 21 | ;o: Sass::Script::Value::String ;I" -moz; T; @ ; 22 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i!;@;@;'0; @;,o;-;.{;/{;(0;00;[o:Sass::Tree::PropNode;#[I"-moz-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ : 23 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i+;o;;i;iG;@;@:@name_source_rangeo; ;@a;o;;i;i:;@;@:@value_source_rangeo; ;o;;i;i<;@b;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i&;@;@:@has_childrenTo;3;#I"with-prefix; T;$[o;4 24 | ;o;5 ;I" -webkit; T; @ ; 25 | ;6;70;i;o; ;o;;i;i;o;;i;i$;@;@;'0; @;,o;-;.{;/{;(0;00;[o;8;#[I"-webkit-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ ;9i;:;;;[; 0; @ ;i;o; ;o;;i;i(;o;;i;iG;@;@;T; 0; @ ;i;o; ;o;;i;i;o;;i;i%;@;@;>T; 0; @ ; I"b// Appearance 26 | @import "compass/support"; 27 | 28 | // Change the appearance for Mozilla, Webkit and possibly the future. 29 | // The appearance property is currently not present in any newer CSS specification. 30 | // 31 | // There is no official list of accepted values, but you might check these source: 32 | // 33 | // * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 34 | // * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 35 | // (search for 'appearance' within the page) 36 | @mixin appearance($appearance) { 37 | // There is no caniuse tracking for appearance. 38 | $appearance: unquote($appearance); 39 | @include with-prefix(-moz) { -moz-appearance: $appearance; } 40 | @include with-prefix(-webkit) { -webkit-appearance: $appearance; } 41 | } 42 | ; T;>T;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 滚动菜单兼容PC 移动端 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
横向滚动菜单
16 | 17 |
点击打开选择滚动菜单
18 | 19 |
bscroll的滚动效果
20 | 21 |
没有分割线
22 | 23 |
其他进入效果
24 | 25 |
无动画效果
26 |
27 | 28 | 29 | 30 | 31 | 32 | 163 | -------------------------------------------------------------------------------- /sass/scrollmenu.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | 6 | @charset "utf-8"; 7 | @import "compass/reset"; 8 | @import "compass/css3"; 9 | @import "compass/layout"; 10 | @import "compass/typography/text/ellipsis"; 11 | @import "compass/typography/links/link-colors"; 12 | @import "border-1px/_base.scss"; //一像素 13 | 14 | .cpt-dw-mask{ 15 | position: fixed; 16 | width:100%; 17 | height:100%; 18 | top:0; 19 | left:0; 20 | bottom:0; 21 | right:0; 22 | @include translate3d(0,0,0); 23 | } 24 | 25 | .cpt-selectScrollMenu{ 26 | -webkit-overflow-scrolling: touch; 27 | -webkit-tap-highlight-color: transparent; 28 | @include user-select(none); 29 | width: 100%; 30 | background: #fff; 31 | position: fixed; 32 | z-index: 2000; 33 | overflow:hidden; 34 | height: 300px; 35 | bottom: 0; 36 | .menuContent{ 37 | padding: 20px; 38 | @include display-flex; 39 | @include justify-content(center); 40 | @include flex-direction(column); 41 | 42 | &.cross{ 43 | padding:0; 44 | 45 | ul{ 46 | position: relative; 47 | width: 100%; 48 | display: table; 49 | padding: 0; 50 | margin: 0; 51 | 52 | li{ 53 | width: 100%; 54 | @include flex-direction(row); 55 | padding:10px 10px; 56 | // border-bottom:1px solid red; 57 | 58 | i{ 59 | margin-bottom: 0; 60 | font-size: 24px; 61 | margin: 0; 62 | float: left; 63 | &.cpt-rightIcon{ 64 | flex: 0 0 20px; 65 | color: #ccc; 66 | float: right; 67 | margin-top: 5px; 68 | } 69 | } 70 | 71 | p{ 72 | width: 80%; 73 | text-indent: 20px; 74 | margin: 0; 75 | padding:2px 0; 76 | font-size: 16px; 77 | text-align: left; 78 | float: left; 79 | line-height: 1.5; 80 | } 81 | 82 | a{ 83 | @include flex-direction(row); 84 | @include justify-content(flex-start); 85 | background-color: transparent; 86 | &:active{ 87 | background-color: transparent; 88 | } 89 | 90 | i{ 91 | margin-bottom: 0; 92 | font-size: 24px; 93 | margin: 0; 94 | float: left; 95 | &.cpt-rightIcon{ 96 | flex: 0 0 20px; 97 | color: #ccc; 98 | float: right; 99 | margin-top: 5px; 100 | } 101 | } 102 | 103 | p{ 104 | width: 80%; 105 | text-indent: 20px; 106 | padding:2px 0; 107 | font-size: 16px; 108 | text-align: left; 109 | float: left; 110 | line-height: 1.5; 111 | } 112 | } 113 | 114 | &.border-1px{ 115 | @include border-1px(rgba(17,27,37,0.1)); 116 | } 117 | } 118 | } 119 | } 120 | 121 | ul{ 122 | position: relative; 123 | width: 100%; 124 | display: table; 125 | margin: 0; 126 | padding:0; 127 | 128 | li{ 129 | width: 25%; 130 | float: left; 131 | @include display-flex; 132 | @include justify-content(flex-start); 133 | @include flex-direction(column); 134 | @include align-items(center); 135 | position:relative; 136 | padding:20px; 137 | cursor: pointer; 138 | 139 | &:active{ 140 | background:#eee; 141 | } 142 | 143 | a{ 144 | width: 100%; 145 | height:inherit; 146 | @include display-flex; 147 | @include justify-content(center); 148 | @include flex-direction(column); 149 | @include align-items(center); 150 | text-decoration: none; 151 | background-color: transparent; 152 | position:relative; 153 | &:active{ 154 | background-color: transparent; 155 | } 156 | 157 | i{ 158 | display: block; 159 | margin: 0 auto; 160 | color: #878787; 161 | margin-bottom: 10px; 162 | font-size: 32px; 163 | flex: 0 0 30px; 164 | } 165 | 166 | p{ 167 | white-space: nowrap; 168 | overflow: hidden; 169 | -ms-text-overflow: ellipsis; 170 | -o-text-overflow: ellipsis; 171 | text-overflow: ellipsis; 172 | color: #999; 173 | font-size: 14px; 174 | flex: 1 1 auto; 175 | text-align: center; 176 | margin: 0; 177 | } 178 | } 179 | 180 | i{ 181 | display: block; 182 | margin: 0 auto; 183 | font-size: 32px; 184 | color: #878787; 185 | margin-bottom: 10px; 186 | flex: 0 0 30px; 187 | } 188 | 189 | p{ 190 | white-space: nowrap; 191 | overflow: hidden; 192 | -ms-text-overflow: ellipsis; 193 | -o-text-overflow: ellipsis; 194 | text-overflow: ellipsis; 195 | color: #999; 196 | font-size: 14px; 197 | flex: 1 1 auto; 198 | text-align: center; 199 | } 200 | } 201 | } 202 | } 203 | } 204 | 205 | 206 | //通用样式 207 | // 这里将是所有的颜色列表信息 208 | $dw-color-default:#ffffff; 209 | $dw-color-default-hover:#e6e6e6; 210 | 211 | $dw-color-success:#21B384; 212 | $dw-color-success-hover:#28A47C; 213 | 214 | $dw-color-primary:#4D96DF; 215 | $dw-color-primary-hover:#4684C3; 216 | 217 | $dw-color-warning:#FFBD7A; 218 | $dw-color-warning-hover:#F0AF6D; 219 | 220 | $dw-color-danger:#D9534F; 221 | $dw-color-danger-hover:#C74743; 222 | 223 | $dw-color-skyblue:#99CCFF; 224 | $dw-color-skyblue-hover:#8EB5DB; 225 | 226 | $dw-color-powderblue:#99CCCC; 227 | $dw-color-powderblue-hover:#85BDBD; 228 | 229 | $dw-color-springgreen:#66CC99; 230 | $dw-color-springgreen-hover:#5AB588; 231 | 232 | $dw-color-lightpurple:#CCCCFF; 233 | $dw-color-lightpurple-hover:#B8B8E9; 234 | 235 | $dw-color-lightgrey:#CCCCCC; 236 | $dw-color-lightgrey-hover:#C5C5C5; 237 | 238 | $dw-color-deepred:#AA314D; 239 | $dw-color-deepred-hover:#923248; 240 | 241 | body,html{ 242 | margin:0; 243 | padding:0; 244 | @include box-sizing(border-box); 245 | } 246 | 247 | *{ 248 | @include box-sizing(border-box); 249 | } 250 | 251 | //关闭谷歌浏览器输入框黑色 252 | input:-webkit-autofill, 253 | textarea:-webkit-autofill, 254 | select:-webkit-autofill { 255 | -webkit-box-shadow: 0 0 0 1000px white inset!important; 256 | } 257 | 258 | // input:-webkit-autofill { 259 | // -webkit-box-shadow: 0 0 0px 1000px white inset !important; 260 | // } 261 | 262 | input[type=text]:focus, input[type=password]:focus, textarea:focus { 263 | -webkit-box-shadow: 0 0 0 1000px white inset; 264 | } 265 | 266 | 267 | .txt-color-666{ 268 | color:#666 !important; 269 | } 270 | 271 | .txt-textOneRow{ 272 | text-overflow: ellipsis; 273 | overflow:hidden; 274 | white-space:nowrap; 275 | } 276 | 277 | .txt-textTwoRow{ 278 | // height: 40 279 | // line-height: 20 几行就是几的倍数 280 | overflow: hidden; 281 | text-overflow: ellipsis; 282 | display: -webkit-box; 283 | -webkit-line-clamp: 2; 284 | -webkit-box-orient: vertical; 285 | } -------------------------------------------------------------------------------- /css/scrollMenu.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | /* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font: inherit; 23 | font-size: 100%; 24 | vertical-align: baseline; 25 | } 26 | 27 | /* line 22, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 28 | html { 29 | line-height: 1; 30 | } 31 | 32 | /* line 24, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 33 | ol, ul { 34 | list-style: none; 35 | } 36 | 37 | /* line 26, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 38 | table { 39 | border-collapse: collapse; 40 | border-spacing: 0; 41 | } 42 | 43 | /* line 28, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 44 | caption, th, td { 45 | text-align: left; 46 | font-weight: normal; 47 | vertical-align: middle; 48 | } 49 | 50 | /* line 30, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 51 | q, blockquote { 52 | quotes: none; 53 | } 54 | /* line 103, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 55 | q:before, q:after, blockquote:before, blockquote:after { 56 | content: ""; 57 | content: none; 58 | } 59 | 60 | /* line 32, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 61 | a img { 62 | border: none; 63 | } 64 | 65 | /* line 116, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 66 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 67 | display: block; 68 | } 69 | 70 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { 71 | /* line 3, ../sass/border-1px/_media.scss */ 72 | .border-1px::after { 73 | -moz-transform: scaleY(0.65); 74 | -ms-transform: scaleY(0.65); 75 | -webkit-transform: scaleY(0.65); 76 | transform: scaleY(0.65); 77 | } 78 | } 79 | @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { 80 | /* line 11, ../sass/border-1px/_media.scss */ 81 | .border-1px::after { 82 | -moz-transform: scaleY(0.5); 83 | -ms-transform: scaleY(0.5); 84 | -webkit-transform: scaleY(0.5); 85 | transform: scaleY(0.5); 86 | } 87 | } 88 | @media (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5) { 89 | /* line 19, ../sass/border-1px/_media.scss */ 90 | .border-1px::after { 91 | -moz-transform: scaleY(0.4); 92 | -ms-transform: scaleY(0.4); 93 | -webkit-transform: scaleY(0.4); 94 | transform: scaleY(0.4); 95 | } 96 | } 97 | @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) { 98 | /* line 27, ../sass/border-1px/_media.scss */ 99 | .border-1px::after { 100 | -moz-transform: scaleY(0.33); 101 | -ms-transform: scaleY(0.33); 102 | -webkit-transform: scaleY(0.33); 103 | transform: scaleY(0.33); 104 | } 105 | } 106 | /* line 14, ../sass/scrollmenu.scss */ 107 | .cpt-dw-mask { 108 | position: fixed; 109 | width: 100%; 110 | height: 100%; 111 | top: 0; 112 | left: 0; 113 | bottom: 0; 114 | right: 0; 115 | -moz-transform: translate3d(0, 0, 0); 116 | -webkit-transform: translate3d(0, 0, 0); 117 | transform: translate3d(0, 0, 0); 118 | } 119 | 120 | /* line 25, ../sass/scrollmenu.scss */ 121 | .cpt-selectScrollMenu { 122 | -webkit-overflow-scrolling: touch; 123 | -webkit-tap-highlight-color: transparent; 124 | -moz-user-select: -moz-none; 125 | -ms-user-select: none; 126 | -webkit-user-select: none; 127 | user-select: none; 128 | width: 100%; 129 | background: #fff; 130 | position: fixed; 131 | z-index: 2000; 132 | overflow: hidden; 133 | height: 300px; 134 | bottom: 0; 135 | } 136 | /* line 36, ../sass/scrollmenu.scss */ 137 | .cpt-selectScrollMenu .menuContent { 138 | padding: 20px; 139 | display: -webkit-flex; 140 | display: flex; 141 | -webkit-justify-content: center; 142 | justify-content: center; 143 | -webkit-flex-direction: column; 144 | flex-direction: column; 145 | } 146 | /* line 42, ../sass/scrollmenu.scss */ 147 | .cpt-selectScrollMenu .menuContent.cross { 148 | padding: 0; 149 | } 150 | /* line 45, ../sass/scrollmenu.scss */ 151 | .cpt-selectScrollMenu .menuContent.cross ul { 152 | position: relative; 153 | width: 100%; 154 | display: table; 155 | padding: 0; 156 | margin: 0; 157 | } 158 | /* line 52, ../sass/scrollmenu.scss */ 159 | .cpt-selectScrollMenu .menuContent.cross ul li { 160 | width: 100%; 161 | -webkit-flex-direction: row; 162 | flex-direction: row; 163 | padding: 10px 10px; 164 | } 165 | /* line 58, ../sass/scrollmenu.scss */ 166 | .cpt-selectScrollMenu .menuContent.cross ul li i { 167 | margin-bottom: 0; 168 | font-size: 24px; 169 | margin: 0; 170 | float: left; 171 | } 172 | /* line 63, ../sass/scrollmenu.scss */ 173 | .cpt-selectScrollMenu .menuContent.cross ul li i.cpt-rightIcon { 174 | flex: 0 0 20px; 175 | color: #ccc; 176 | float: right; 177 | margin-top: 5px; 178 | } 179 | /* line 71, ../sass/scrollmenu.scss */ 180 | .cpt-selectScrollMenu .menuContent.cross ul li p { 181 | width: 80%; 182 | text-indent: 20px; 183 | margin: 0; 184 | padding: 2px 0; 185 | font-size: 16px; 186 | text-align: left; 187 | float: left; 188 | line-height: 1.5; 189 | } 190 | /* line 82, ../sass/scrollmenu.scss */ 191 | .cpt-selectScrollMenu .menuContent.cross ul li a { 192 | -webkit-flex-direction: row; 193 | flex-direction: row; 194 | -webkit-justify-content: flex-start; 195 | justify-content: flex-start; 196 | background-color: transparent; 197 | } 198 | /* line 86, ../sass/scrollmenu.scss */ 199 | .cpt-selectScrollMenu .menuContent.cross ul li a:active { 200 | background-color: transparent; 201 | } 202 | /* line 90, ../sass/scrollmenu.scss */ 203 | .cpt-selectScrollMenu .menuContent.cross ul li a i { 204 | margin-bottom: 0; 205 | font-size: 24px; 206 | margin: 0; 207 | float: left; 208 | } 209 | /* line 95, ../sass/scrollmenu.scss */ 210 | .cpt-selectScrollMenu .menuContent.cross ul li a i.cpt-rightIcon { 211 | flex: 0 0 20px; 212 | color: #ccc; 213 | float: right; 214 | margin-top: 5px; 215 | } 216 | /* line 103, ../sass/scrollmenu.scss */ 217 | .cpt-selectScrollMenu .menuContent.cross ul li a p { 218 | width: 80%; 219 | text-indent: 20px; 220 | padding: 2px 0; 221 | font-size: 16px; 222 | text-align: left; 223 | float: left; 224 | line-height: 1.5; 225 | } 226 | /* line 114, ../sass/scrollmenu.scss */ 227 | .cpt-selectScrollMenu .menuContent.cross ul li.border-1px { 228 | position: relative; 229 | } 230 | /* line 3, ../sass/border-1px/_mixin.scss */ 231 | .cpt-selectScrollMenu .menuContent.cross ul li.border-1px:after { 232 | display: block; 233 | width: 100%; 234 | position: absolute; 235 | background: rgba(17, 27, 37, 0.1) !important; 236 | left: 0; 237 | bottom: 0; 238 | border-top: 1px solid rgba(17, 27, 37, 0.1) !important; 239 | content: ''; 240 | } 241 | /* line 121, ../sass/scrollmenu.scss */ 242 | .cpt-selectScrollMenu .menuContent ul { 243 | position: relative; 244 | width: 100%; 245 | display: table; 246 | margin: 0; 247 | padding: 0; 248 | } 249 | /* line 128, ../sass/scrollmenu.scss */ 250 | .cpt-selectScrollMenu .menuContent ul li { 251 | width: 25%; 252 | float: left; 253 | display: -webkit-flex; 254 | display: flex; 255 | -webkit-justify-content: flex-start; 256 | justify-content: flex-start; 257 | -webkit-flex-direction: column; 258 | flex-direction: column; 259 | -webkit-align-items: center; 260 | align-items: center; 261 | position: relative; 262 | padding: 20px; 263 | cursor: pointer; 264 | } 265 | /* line 139, ../sass/scrollmenu.scss */ 266 | .cpt-selectScrollMenu .menuContent ul li:active { 267 | background: #eee; 268 | } 269 | /* line 143, ../sass/scrollmenu.scss */ 270 | .cpt-selectScrollMenu .menuContent ul li a { 271 | width: 100%; 272 | height: inherit; 273 | display: -webkit-flex; 274 | display: flex; 275 | -webkit-justify-content: center; 276 | justify-content: center; 277 | -webkit-flex-direction: column; 278 | flex-direction: column; 279 | -webkit-align-items: center; 280 | align-items: center; 281 | text-decoration: none; 282 | background-color: transparent; 283 | position: relative; 284 | } 285 | /* line 153, ../sass/scrollmenu.scss */ 286 | .cpt-selectScrollMenu .menuContent ul li a:active { 287 | background-color: transparent; 288 | } 289 | /* line 157, ../sass/scrollmenu.scss */ 290 | .cpt-selectScrollMenu .menuContent ul li a i { 291 | display: block; 292 | margin: 0 auto; 293 | color: #878787; 294 | margin-bottom: 10px; 295 | font-size: 32px; 296 | flex: 0 0 30px; 297 | } 298 | /* line 166, ../sass/scrollmenu.scss */ 299 | .cpt-selectScrollMenu .menuContent ul li a p { 300 | white-space: nowrap; 301 | overflow: hidden; 302 | -ms-text-overflow: ellipsis; 303 | -o-text-overflow: ellipsis; 304 | text-overflow: ellipsis; 305 | color: #999; 306 | font-size: 14px; 307 | flex: 1 1 auto; 308 | text-align: center; 309 | margin: 0; 310 | } 311 | /* line 180, ../sass/scrollmenu.scss */ 312 | .cpt-selectScrollMenu .menuContent ul li i { 313 | display: block; 314 | margin: 0 auto; 315 | font-size: 32px; 316 | color: #878787; 317 | margin-bottom: 10px; 318 | flex: 0 0 30px; 319 | } 320 | /* line 189, ../sass/scrollmenu.scss */ 321 | .cpt-selectScrollMenu .menuContent ul li p { 322 | white-space: nowrap; 323 | overflow: hidden; 324 | -ms-text-overflow: ellipsis; 325 | -o-text-overflow: ellipsis; 326 | text-overflow: ellipsis; 327 | color: #999; 328 | font-size: 14px; 329 | flex: 1 1 auto; 330 | text-align: center; 331 | } 332 | 333 | /* line 241, ../sass/scrollmenu.scss */ 334 | body, html { 335 | margin: 0; 336 | padding: 0; 337 | -moz-box-sizing: border-box; 338 | -webkit-box-sizing: border-box; 339 | box-sizing: border-box; 340 | } 341 | 342 | /* line 247, ../sass/scrollmenu.scss */ 343 | * { 344 | -moz-box-sizing: border-box; 345 | -webkit-box-sizing: border-box; 346 | box-sizing: border-box; 347 | } 348 | 349 | /* line 252, ../sass/scrollmenu.scss */ 350 | input:-webkit-autofill, 351 | textarea:-webkit-autofill, 352 | select:-webkit-autofill { 353 | -webkit-box-shadow: 0 0 0 1000px white inset !important; 354 | } 355 | 356 | /* line 262, ../sass/scrollmenu.scss */ 357 | input[type=text]:focus, input[type=password]:focus, textarea:focus { 358 | -webkit-box-shadow: 0 0 0 1000px white inset; 359 | } 360 | 361 | /* line 267, ../sass/scrollmenu.scss */ 362 | .txt-color-666 { 363 | color: #666 !important; 364 | } 365 | 366 | /* line 271, ../sass/scrollmenu.scss */ 367 | .txt-textOneRow { 368 | text-overflow: ellipsis; 369 | overflow: hidden; 370 | white-space: nowrap; 371 | } 372 | 373 | /* line 277, ../sass/scrollmenu.scss */ 374 | .txt-textTwoRow { 375 | overflow: hidden; 376 | text-overflow: ellipsis; 377 | display: -webkit-box; 378 | -webkit-line-clamp: 2; 379 | -webkit-box-orient: vertical; 380 | } 381 | -------------------------------------------------------------------------------- /js/scrollmenu.js: -------------------------------------------------------------------------------- 1 | /*===========================================*/ 2 | /*==========By Never forgotten youth=========*/ 3 | /*==================js滚动菜单===============*/ 4 | 5 | (function($,window){ 6 | 'use strict'; 7 | //动态加载animate 8 | var loadStyles = function(url) { 9 | var hasSameStyle = false; 10 | var links = $('link'); 11 | for(var i = 0;i').css({ 51 | background:opt.background, 52 | 'z-index':opt.zIndex, 53 | 'webkit-transition':'all '+opt.duration/1000+'s', 54 | '-moz-transition':'all '+opt.duration/1000+'s', 55 | transition:'all '+opt.duration/1000+'s', 56 | '-webkit-animation-duration':opt.duration/1000+'s', 57 | '-moz-animation-duration':opt.duration/1000+'s', 58 | 'animation-duration':opt.duration/1000+'s', 59 | }).appendTo($('body')); 60 | defaultvalue._showScroll(false); 61 | defaultvalue._event(); 62 | }; 63 | 64 | defaultvalue._showScroll = function(isShow){ 65 | var isshow = isshow || 'false'; 66 | if(isShow){ 67 | $('body,html').css({height:'auto',overflow:'auto'}); 68 | 69 | $(document.body).css({ 70 | 'border-right':'none', 71 | }) 72 | }else{ 73 | var scrollWidth = defaultvalue._getScrollWidth(); 74 | $('body,html').css({height:'100%',overflow:'hidden'}); 75 | $('body').css({ 76 | 'border-right':scrollWidth+'px solid transparent', 77 | }) 78 | } 79 | }; 80 | 81 | defaultvalue._getScrollWidth = function(){ 82 | var noScroll, scroll, oDiv = document.createElement('div'); 83 | oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; 84 | noScroll = document.body.appendChild(oDiv).clientWidth; 85 | oDiv.style.overflowY = 'scroll'; 86 | scroll = oDiv.clientWidth; 87 | document.body.removeChild(oDiv); 88 | return noScroll-scroll; 89 | } 90 | 91 | defaultvalue._removeMask = function(){ 92 | if(!isLowerIe9()){ 93 | showMaskEle.addClass("fadeOut").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 94 | showMaskEle.remove(); 95 | }); 96 | }else{ 97 | showMaskEle.remove(); 98 | } 99 | 100 | opt.closeAnimate(); 101 | }; 102 | 103 | defaultvalue._event = function(){ 104 | showMaskEle.on('click',function(){ 105 | defaultvalue._showScroll(true); 106 | if(opt.clickClose){ 107 | defaultvalue._removeMask(); 108 | } 109 | }) 110 | }; 111 | 112 | defaultvalue._init(); 113 | }; 114 | 115 | var isIE = function(callBack) { 116 | var isIE = false; 117 | if (!!window.ActiveXObject || "ActiveXObject" in window) { 118 | isIE = true; 119 | } 120 | else{ 121 | isIE = false; 122 | } 123 | 124 | if(typeof(callBack) === 'function'){ 125 | callBack(isIE); 126 | }else{ 127 | return isIE; 128 | } 129 | }; 130 | 131 | var isLowerIe9 = function(){ 132 | return (!window.FormData); 133 | }; 134 | 135 | //滚动菜单 136 | $.fn.scrollmenu = function(options) { 137 | var defaultvalue = { 138 | height: 320, //高度 139 | zIndex: 10001, //层级 140 | background: '#fff', //背景色 141 | type: 'cross', //cross 列表样式 or '' 九宫格效果 142 | animateIn: 'fadeInUpBig', //进入的动画方式 animate css 143 | animateOut: 'fadeOutDownBig', //离开是的动画方式 144 | hasLineBorder: true, //是否有border 145 | bscroll: false, //是否使用bettersroll 146 | showRightIcon: true, //横向列表下是否显示右侧图标 147 | duration: 300, //300毫秒 148 | iconSIze: 28, 149 | source: [ 150 | { 151 | title:'音乐', 152 | hasHref:false, 153 | href:'#', 154 | font_imgClass:'dw-icon-music', 155 | hrefType:'_self', //_self , _blank, _parent, _top 156 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 157 | },{ 158 | title:'搜索', 159 | hasHref:false, 160 | href:'https://github.com/IFmiss/centermenu', 161 | font_imgClass:'dw-icon-search', 162 | hrefType:'_self', 163 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 164 | },{ 165 | title:'二维码', 166 | hasHref:false, 167 | href:'#', 168 | font_imgClass:'dw-icon-erweicode', 169 | hrefType:'_self', 170 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 171 | },{ 172 | title:'安卓', 173 | hasHref:false, 174 | href:'#', 175 | font_imgClass:'dw-icon-android', 176 | hrefType:'_self', 177 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 178 | },{ 179 | title:'ios', 180 | hasHref:false, 181 | href:'#', 182 | font_imgClass:'dw-icon-apple', 183 | hrefType:'_self', 184 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 185 | },{ 186 | title:'喜欢', 187 | hasHref:true, 188 | href:'https://github.com/IFmiss/centermenu', 189 | font_imgClass:'dw-icon-like', 190 | hrefType:'_self', 191 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 192 | },{ 193 | title:'提现', 194 | hasHref:true, 195 | href:'https://github.com/IFmiss/centermenu', 196 | font_imgClass:'dw-icon-money', 197 | hrefType:'_self', 198 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 199 | },{ 200 | title:'微博', 201 | hasHref:true, 202 | href:'https://github.com/IFmiss/centermenu', 203 | font_imgClass:'dw-icon-weibo', 204 | hrefType:'_self', 205 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 206 | },{ 207 | title:'密码', 208 | hasHref:true, 209 | href:'https://github.com/IFmiss/centermenu', 210 | font_imgClass:'dw-icon-password', 211 | hrefType:'_self', 212 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 213 | },{ 214 | title:'分享', 215 | hasHref:true, 216 | href:'https://github.com/IFmiss/centermenu', 217 | font_imgClass:'dw-icon-share', 218 | hrefType:'_self', 219 | rightFont_imgClass: 'dw-icon-right', //右侧的图标信息 220 | } 221 | ], 222 | click:function(ele,index){}, 223 | 224 | } 225 | 226 | var _this = this; 227 | 228 | var opt = $.extend(defaultvalue,options||{}); 229 | 230 | 231 | defaultvalue._init = function(){ 232 | if($('body').find('.cpt-selectScrollMenu').length){ 233 | return; 234 | }; 235 | 236 | _this.cpt_selectScrollMenu = $('
').css({ 237 | height:opt.height, 238 | background:opt.background, 239 | 'z-index':opt.zIndex, 240 | 'webkit-transition':'all '+opt.duration/1000+'s', 241 | '-moz-transition':'all '+opt.duration/1000+'s', 242 | transition:'all '+opt.duration/1000+'s', 243 | '-webkit-animation-duration':opt.duration/1000+'s', 244 | '-moz-animation-duration':opt.duration/1000+'s', 245 | 'animation-duration':opt.duration/1000+'s', 246 | }).appendTo($('body')); 247 | 248 | _this.cpt_selectScrollMenuContent = $('').css({ 249 | position:'relative', 250 | width:'100%', 251 | }).appendTo(_this.cpt_selectScrollMenu); 252 | 253 | _this.cpt_ul_menuList = $('').appendTo(_this.cpt_selectScrollMenuContent); 254 | 255 | var length = opt.source.length; 256 | 257 | for(var i = 0;i').appendTo(_this.cpt_ul_menuList); 261 | }else{ 262 | _this.cpt_li_menuList = $('
  • ').appendTo(_this.cpt_ul_menuList); 263 | } 264 | 265 | //是否存在链接 266 | if(opt.source[i].hasHref){ 267 | _this.href = $('').appendTo(_this.cpt_li_menuList); 268 | _this.icon = $('').css({ 269 | 'font-size':opt.iconSIze, 270 | width:opt.iconSIze 271 | }).appendTo(_this.href); 272 | _this.title = $('

    '+opt.source[i].title+'

    ').appendTo(_this.href); 273 | 274 | 275 | //横向的话是否加右侧图标 276 | if(opt.type === 'cross'){ 277 | if (opt.showRightIcon) { 278 | _this.rightIcon = $('').css({ 279 | 'font-size':'18px', 280 | }).appendTo(_this.href); 281 | } 282 | } 283 | }else{ 284 | _this.icon = $('').css({ 285 | 'font-size':opt.iconSIze, 286 | width:opt.iconSIze 287 | }).appendTo(_this.cpt_li_menuList); 288 | _this.title = $('

    '+opt.source[i].title+'

    ').appendTo(_this.cpt_li_menuList); 289 | 290 | //横向的话是否加右侧图标 291 | if(opt.type === 'cross'){ 292 | if (opt.showRightIcon) { 293 | _this.rightIcon = $('').css({ 294 | 'font-size':'18px', 295 | }).appendTo(_this.cpt_li_menuList); 296 | } 297 | } 298 | } 299 | 300 | _this.cpt_li_menuList.on('click',function(event){ 301 | var index = $(this).index(); 302 | if(event.originalEvent._constructed){ 303 | return; 304 | } 305 | 306 | var hasHref = $(this).find('a').length; 307 | var ret = { 308 | hasHref:hasHref, 309 | ele:$(this), 310 | index:index, 311 | title:opt.source[index].title, 312 | icon_class:opt.source[index].font_imgClass, 313 | } 314 | 315 | opt.click(ret); 316 | 317 | if(!isLowerIe9()){ 318 | _this.cpt_selectScrollMenu.addClass(opt.animateOut).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 319 | _this.cpt_selectScrollMenu.remove(); 320 | }); 321 | 322 | $('.cpt-dw-mask').addClass("fadeOut").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 323 | $('.cpt-dw-mask').remove(); 324 | 325 | //可滚动 326 | $('body,html').css({height:'auto',overflow:'auto'}); 327 | $(document.body).css({ 328 | 'border-right':'none', 329 | }) 330 | }); 331 | }else{ 332 | _this.cpt_selectScrollMenu.remove(); 333 | $('.cpt-dw-mask').remove(); 334 | //可滚动 335 | $('body,html').css({height:'auto',overflow:'auto'}); 336 | $(document.body).css({ 337 | 'border-right':'none', 338 | });isLowerIe9 339 | } 340 | }); 341 | } 342 | 343 | defaultvalue._clickMaskToClose(); 344 | 345 | defaultvalue._bscroll(); 346 | }; 347 | 348 | defaultvalue._clickMaskToClose = function(){ 349 | showMask({ 350 | duration:opt.duration, 351 | zIndex:opt.zIndex - 1, 352 | closeAnimate: function(){ 353 | if(!isLowerIe9()){ 354 | _this.cpt_selectScrollMenu.addClass(opt.animateOut).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 355 | _this.cpt_selectScrollMenu.remove(); 356 | }); 357 | 358 | }else{ 359 | _this.cpt_selectScrollMenu.remove(); 360 | } 361 | }, 362 | }); 363 | }; 364 | 365 | 366 | defaultvalue._bscroll = function(){ 367 | var isIe = isIE(); 368 | if(opt.bscroll && !isIe){ 369 | var scroll = new BScroll(document.getElementById('selectScrollMenu'),{ 370 | startX: 0, 371 | startY: 0, 372 | probeType: 3, 373 | click:true, 374 | preventDefault:false, 375 | preventDefaultException:false, 376 | }); 377 | }else{ 378 | _this.cpt_selectScrollMenu.css({ 379 | 'overflow-y':'scroll', 380 | }); 381 | _this.cpt_selectScrollMenuContent.css({ 382 | '-webkit-overflow-scrolling' : 'touch', 383 | }); 384 | }; 385 | } 386 | 387 | defaultvalue._init(); 388 | return this; 389 | }; 390 | 391 | })(jQuery,window); 392 | -------------------------------------------------------------------------------- /fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);-ms-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);-ms-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);-ms-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);-ms-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);-ms-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);-ms-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);-ms-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);-ms-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);-ms-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}@keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);-ms-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);-ms-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-ms-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);-ms-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);-ms-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);-ms-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);-ms-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);-ms-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);-ms-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}@keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);-ms-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);-ms-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);-ms-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);-ms-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);-ms-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);-ms-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);-ms-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);-ms-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);-ms-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);-ms-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);-ms-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);-ms-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);-ms-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);-ms-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);-ms-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);-ms-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);-ms-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);-ms-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);-ms-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} -------------------------------------------------------------------------------- /js/bscroll.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["BScroll"] = factory(); 8 | else 9 | root["BScroll"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | 39 | 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = "/assets/"; 48 | 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | var _bscroll = __webpack_require__(1); 60 | 61 | _bscroll.BScroll.Version = ("0.1.15"); 62 | 63 | module.exports = _bscroll.BScroll; 64 | 65 | /***/ }, 66 | /* 1 */ 67 | /***/ function(module, exports, __webpack_require__) { 68 | 69 | 'use strict'; 70 | 71 | Object.defineProperty(exports, "__esModule", { 72 | value: true 73 | }); 74 | exports.BScroll = undefined; 75 | 76 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 77 | 78 | var _util = __webpack_require__(2); 79 | 80 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 81 | 82 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 83 | 84 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 85 | 86 | var TOUCH_EVENT = 1; 87 | 88 | var BScroll = exports.BScroll = function (_EventEmitter) { 89 | _inherits(BScroll, _EventEmitter); 90 | 91 | function BScroll(el, options) { 92 | _classCallCheck(this, BScroll); 93 | 94 | var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(BScroll).call(this)); 95 | 96 | _this.wrapper = typeof el === 'string' ? document.querySelector(el) : el; 97 | _this.scroller = _this.wrapper.children[0]; 98 | 99 | _this.scrollerStyle = _this.scroller.style; 100 | 101 | _this.options = { 102 | startX: 0, 103 | startY: 0, 104 | scrollY: true, 105 | directionLockThreshold: 5, 106 | momentum: true, 107 | bounce: true, 108 | selectedIndex: 0, 109 | rotate: 25, 110 | wheel: false, 111 | snap: false, 112 | snapLoop: false, 113 | snapThreshold: 0.1, 114 | swipeTime: 2500, 115 | bounceTime: 700, 116 | adjustTime: 400, 117 | swipeBounceTime: 1200, 118 | deceleration: 0.001, 119 | momentumLimitTime: 300, 120 | momentumLimitDistance: 15, 121 | resizePolling: 60, 122 | preventDefault: true, 123 | preventDefaultException: { 124 | tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ 125 | }, 126 | HWCompositing: true, 127 | useTransition: true, 128 | useTransform: true 129 | }; 130 | 131 | (0, _util.extend)(_this.options, options); 132 | 133 | _this.translateZ = _this.options.HWCompositing && _util.hasPerspective ? ' translateZ(0)' : ''; 134 | 135 | _this.options.useTransition = _this.options.useTransition && _util.hasTransition; 136 | _this.options.useTransform = _this.options.useTransform && _util.hasTransform; 137 | 138 | _this.options.eventPassthrough = _this.options.eventPassthrough === true ? 'vertical' : _this.options.eventPassthrough; 139 | _this.options.preventDefault = !_this.options.eventPassthrough && _this.options.preventDefault; 140 | 141 | _this.options.scrollX = _this.options.eventPassthrough === 'horizontal' ? false : _this.options.scrollX; 142 | _this.options.scrollY = _this.options.eventPassthrough === 'vertical' ? false : _this.options.scrollY; 143 | 144 | _this.options.freeScroll = _this.options.freeScroll && !_this.options.eventPassthrough; 145 | _this.options.directionLockThreshold = _this.options.eventPassthrough ? 0 : _this.options.directionLockThreshold; 146 | 147 | if (_this.options.tap === true) { 148 | _this.options.tap = 'tap'; 149 | } 150 | 151 | _this._init(); 152 | 153 | if (_this.options.snap) { 154 | _this._initSnap(); 155 | } 156 | 157 | _this.refresh(); 158 | 159 | if (!_this.options.snap) { 160 | _this.scrollTo(_this.options.startX, _this.options.startY); 161 | } 162 | 163 | _this.enable(); 164 | return _this; 165 | } 166 | 167 | _createClass(BScroll, [{ 168 | key: '_init', 169 | value: function _init() { 170 | this.x = 0; 171 | this.y = 0; 172 | this.directionX = 0; 173 | this.directionY = 0; 174 | 175 | this._addEvents(); 176 | } 177 | }, { 178 | key: '_initSnap', 179 | value: function _initSnap() { 180 | var _this2 = this; 181 | 182 | this.currentPage = {}; 183 | 184 | if (this.options.snapLoop) { 185 | var children = this.scroller.children; 186 | if (children.length > 0) { 187 | (0, _util.prepend)(children[children.length - 1].cloneNode(true), this.scroller); 188 | this.scroller.appendChild(children[1].cloneNode(true)); 189 | } 190 | } 191 | 192 | if (typeof this.options.snap === 'string') { 193 | this.options.snap = this.scroller.querySelectorAll(this.options.snap); 194 | } 195 | 196 | this.on('refresh', function () { 197 | _this2.pages = []; 198 | 199 | if (!_this2.wrapperWidth || !_this2.wrapperHeight || !_this2.scrollerWidth || !_this2.scrollerHeight) { 200 | return; 201 | } 202 | 203 | var stepX = _this2.options.snapStepX || _this2.wrapperWidth; 204 | var stepY = _this2.options.snapStepY || _this2.wrapperHeight; 205 | 206 | var x = 0; 207 | var y = void 0; 208 | var cx = void 0; 209 | var cy = void 0; 210 | var i = 0; 211 | var l = void 0; 212 | var m = 0; 213 | var n = void 0; 214 | var el = void 0; 215 | var rect = void 0; 216 | if (_this2.options.snap === true) { 217 | cx = Math.round(stepX / 2); 218 | cy = Math.round(stepY / 2); 219 | 220 | while (x > -_this2.scrollerWidth) { 221 | _this2.pages[i] = []; 222 | l = 0; 223 | y = 0; 224 | 225 | while (y > -_this2.scrollerHeight) { 226 | _this2.pages[i][l] = { 227 | x: Math.max(x, _this2.maxScrollX), 228 | y: Math.max(y, _this2.maxScrollY), 229 | width: stepX, 230 | height: stepY, 231 | cx: x - cx, 232 | cy: y - cy 233 | }; 234 | 235 | y -= stepY; 236 | l++; 237 | } 238 | 239 | x -= stepX; 240 | i++; 241 | } 242 | } else { 243 | el = _this2.options.snap; 244 | l = el.length; 245 | n = -1; 246 | 247 | for (; i < l; i++) { 248 | rect = (0, _util.getRect)(el[i]); 249 | if (i === 0 || rect.left <= (0, _util.getRect)(el[i - 1]).left) { 250 | m = 0; 251 | n++; 252 | } 253 | 254 | if (!_this2.pages[m]) { 255 | _this2.pages[m] = []; 256 | } 257 | 258 | x = Math.max(-rect.left, _this2.maxScrollX); 259 | y = Math.max(-rect.top, _this2.maxScrollY); 260 | cx = x - Math.round(rect.width / 2); 261 | cy = y - Math.round(rect.height / 2); 262 | 263 | _this2.pages[m][n] = { 264 | x: x, 265 | y: y, 266 | width: rect.width, 267 | height: rect.height, 268 | cx: cx, 269 | cy: cy 270 | }; 271 | 272 | if (x > _this2.maxScrollX) { 273 | m++; 274 | } 275 | } 276 | } 277 | 278 | var initPage = _this2.options.snapLoop ? 1 : 0; 279 | _this2.goToPage(_this2.currentPage.pageX || initPage, _this2.currentPage.pageY || 0, 0); 280 | 281 | if (_this2.options.snapThreshold % 1 === 0) { 282 | _this2.snapThresholdX = _this2.options.snapThreshold; 283 | _this2.snapThresholdY = _this2.options.snapThreshold; 284 | } else { 285 | _this2.snapThresholdX = Math.round(_this2.pages[_this2.currentPage.pageX][_this2.currentPage.pageY].width * _this2.options.snapThreshold); 286 | _this2.snapThresholdY = Math.round(_this2.pages[_this2.currentPage.pageX][_this2.currentPage.pageY].height * _this2.options.snapThreshold); 287 | } 288 | }); 289 | 290 | this.on('scrollEnd', function () { 291 | if (_this2.options.snapLoop) { 292 | if (_this2.currentPage.pageX === 0) { 293 | _this2.goToPage(_this2.pages.length - 2, _this2.currentPage.pageY, 0); 294 | } 295 | if (_this2.currentPage.pageX === _this2.pages.length - 1) { 296 | _this2.goToPage(1, _this2.currentPage.pageY, 0); 297 | } 298 | } 299 | }); 300 | 301 | this.on('flick', function () { 302 | var time = _this2.options.snapSpeed || Math.max(Math.max(Math.min(Math.abs(_this2.x - _this2.startX), 1000), Math.min(Math.abs(_this2.y - _this2.startY), 1000)), 300); 303 | 304 | _this2.goToPage(_this2.currentPage.pageX + _this2.directionX, _this2.currentPage.pageY + _this2.directionY, time); 305 | }); 306 | } 307 | }, { 308 | key: '_nearestSnap', 309 | value: function _nearestSnap(x, y) { 310 | if (!this.pages.length) { 311 | return { x: 0, y: 0, pageX: 0, pageY: 0 }; 312 | } 313 | 314 | var i = 0; 315 | 316 | if (Math.abs(x - this.absStartX) < this.snapThresholdX && Math.abs(y - this.absStartY) < this.snapThresholdY) { 317 | return this.currentPage; 318 | } 319 | 320 | if (x > 0) { 321 | x = 0; 322 | } else if (x < this.maxScrollX) { 323 | x = this.maxScrollX; 324 | } 325 | 326 | if (y > 0) { 327 | y = 0; 328 | } else if (y < this.maxScrollY) { 329 | y = this.maxScrollY; 330 | } 331 | 332 | var l = this.pages.length; 333 | for (; i < l; i++) { 334 | if (x >= this.pages[i][0].cx) { 335 | x = this.pages[i][0].x; 336 | break; 337 | } 338 | } 339 | 340 | l = this.pages[i].length; 341 | 342 | var m = 0; 343 | for (; m < l; m++) { 344 | if (y >= this.pages[0][m].cy) { 345 | y = this.pages[0][m].y; 346 | break; 347 | } 348 | } 349 | 350 | if (i === this.currentPage.pageX) { 351 | i += this.directionX; 352 | 353 | if (i < 0) { 354 | i = 0; 355 | } else if (i >= this.pages.length) { 356 | i = this.pages.length - 1; 357 | } 358 | 359 | x = this.pages[i][0].x; 360 | } 361 | 362 | if (m === this.currentPage.pageY) { 363 | m += this.directionY; 364 | 365 | if (m < 0) { 366 | m = 0; 367 | } else if (m >= this.pages[0].length) { 368 | m = this.pages[0].length - 1; 369 | } 370 | 371 | y = this.pages[0][m].y; 372 | } 373 | 374 | return { 375 | x: x, 376 | y: y, 377 | pageX: i, 378 | pageY: m 379 | }; 380 | } 381 | }, { 382 | key: '_addEvents', 383 | value: function _addEvents() { 384 | var eventOperation = _util.addEvent; 385 | this._handleEvents(eventOperation); 386 | } 387 | }, { 388 | key: '_removeEvents', 389 | value: function _removeEvents() { 390 | var eventOperation = _util.removeEvent; 391 | this._handleEvents(eventOperation); 392 | } 393 | }, { 394 | key: '_handleEvents', 395 | value: function _handleEvents(eventOperation) { 396 | var target = this.options.bindToWrapper ? this.wrapper : window; 397 | eventOperation(window, 'orientationchange', this); 398 | eventOperation(window, 'resize', this); 399 | 400 | if (this.options.click) { 401 | eventOperation(this.wrapper, 'click', this); 402 | } 403 | 404 | if (!this.options.disableMouse) { 405 | eventOperation(this.wrapper, 'mousedown', this); 406 | eventOperation(target, 'mousemove', this); 407 | eventOperation(target, 'mousecancel', this); 408 | eventOperation(target, 'mouseup', this); 409 | } 410 | 411 | if (_util.hasTouch && !this.options.disableTouch) { 412 | eventOperation(this.wrapper, 'touchstart', this); 413 | eventOperation(target, 'touchmove', this); 414 | eventOperation(target, 'touchcancel', this); 415 | eventOperation(target, 'touchend', this); 416 | } 417 | 418 | eventOperation(this.scroller, _util.style.transitionEnd, this); 419 | } 420 | }, { 421 | key: '_start', 422 | value: function _start(e) { 423 | var _eventType = _util.eventType[e.type]; 424 | if (_eventType !== TOUCH_EVENT) { 425 | if (e.button !== 0) { 426 | return; 427 | } 428 | } 429 | if (!this.enabled || this.destroyed || this.initiated && this.initiated !== _eventType) { 430 | return; 431 | } 432 | this.initiated = _eventType; 433 | 434 | if (this.options.preventDefault && !_util.isBadAndroid && !(0, _util.preventDefaultException)(e.target, this.options.preventDefaultException)) { 435 | e.preventDefault(); 436 | } 437 | 438 | this.moved = false; 439 | this.distX = 0; 440 | this.distY = 0; 441 | this.directionX = 0; 442 | this.directionY = 0; 443 | this.directionLocked = 0; 444 | 445 | this._transitionTime(); 446 | this.startTime = +new Date(); 447 | 448 | if (this.options.wheel) { 449 | this.target = e.target; 450 | } 451 | 452 | if (this.options.useTransition && this.isInTransition) { 453 | this.isInTransition = false; 454 | var pos = this.getComputedPosition(); 455 | this._translate(pos.x, pos.y); 456 | if (this.options.wheel) { 457 | this.target = this.items[Math.round(-pos.y / this.itemHeight)]; 458 | } else { 459 | this.trigger('scrollEnd'); 460 | } 461 | } 462 | 463 | var point = e.touches ? e.touches[0] : e; 464 | 465 | this.startX = this.x; 466 | this.startY = this.y; 467 | this.absStartX = this.x; 468 | this.absStartY = this.y; 469 | this.pointX = point.pageX; 470 | this.pointY = point.pageY; 471 | 472 | this.trigger('beforeScrollStart'); 473 | } 474 | }, { 475 | key: '_move', 476 | value: function _move(e) { 477 | if (!this.enabled || this.destroyed || _util.eventType[e.type] !== this.initiated) { 478 | return; 479 | } 480 | 481 | if (this.options.preventDefault) { 482 | e.preventDefault(); 483 | } 484 | 485 | var point = e.touches ? e.touches[0] : e; 486 | var deltaX = point.pageX - this.pointX; 487 | var deltaY = point.pageY - this.pointY; 488 | 489 | this.pointX = point.pageX; 490 | this.pointY = point.pageY; 491 | 492 | this.distX += deltaX; 493 | this.distY += deltaY; 494 | 495 | var absDistX = Math.abs(this.distX); 496 | var absDistY = Math.abs(this.distY); 497 | 498 | var timestamp = +new Date(); 499 | 500 | if (timestamp - this.endTime > this.options.momentumLimitTime && absDistY < this.options.momentumLimitDistance && absDistX < this.options.momentumLimitDistance) { 501 | return; 502 | } 503 | 504 | if (!this.directionLocked && !this.options.freeScroll) { 505 | if (absDistX > absDistY + this.options.directionLockThreshold) { 506 | this.directionLocked = 'h'; 507 | } else if (absDistY >= absDistX + this.options.directionLockThreshold) { 508 | this.directionLocked = 'v'; 509 | } else { 510 | this.directionLocked = 'n'; 511 | } 512 | } 513 | 514 | if (this.directionLocked === 'h') { 515 | if (this.options.eventPassthrough === 'vertical') { 516 | e.preventDefault(); 517 | } else if (this.options.eventPassthrough === 'horizontal') { 518 | this.initiated = false; 519 | return; 520 | } 521 | deltaY = 0; 522 | } else if (this.directionLocked === 'v') { 523 | if (this.options.eventPassthrough === 'horizontal') { 524 | e.preventDefault(); 525 | } else if (this.options.eventPassthrough === 'vertical') { 526 | this.initiated = false; 527 | return; 528 | } 529 | deltaX = 0; 530 | } 531 | 532 | deltaX = this.hasHorizontalScroll ? deltaX : 0; 533 | deltaY = this.hasVerticalScroll ? deltaY : 0; 534 | 535 | var newX = this.x + deltaX; 536 | var newY = this.y + deltaY; 537 | 538 | if (newX > 0 || newX < this.maxScrollX) { 539 | if (this.options.bounce) { 540 | newX = this.x + deltaX / 3; 541 | } else { 542 | newX = newX > 0 ? 0 : this.maxScrollX; 543 | } 544 | } 545 | if (newY > 0 || newY < this.maxScrollY) { 546 | if (this.options.bounce) { 547 | newY = this.y + deltaY / 3; 548 | } else { 549 | newY = newY > 0 ? 0 : this.maxScrollY; 550 | } 551 | } 552 | 553 | this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0; 554 | this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0; 555 | 556 | if (!this.moved) { 557 | this.moved = true; 558 | this.trigger('scrollStart'); 559 | } 560 | 561 | this._translate(newX, newY); 562 | 563 | if (timestamp - this.startTime > this.options.momentumLimitTime) { 564 | this.startTime = timestamp; 565 | this.startX = this.x; 566 | this.startY = this.y; 567 | 568 | if (this.options.probeType === 1) { 569 | this.trigger('scroll', { 570 | x: this.x, 571 | y: this.y 572 | }); 573 | } 574 | } 575 | 576 | if (this.options.probeType > 1) { 577 | this.trigger('scroll', { 578 | x: this.x, 579 | y: this.y 580 | }); 581 | } 582 | 583 | var scrollLeft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; 584 | var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 585 | 586 | var pX = this.pointX - scrollLeft; 587 | var pY = this.pointY - scrollTop; 588 | 589 | if (pX > document.documentElement.clientWidth - this.options.momentumLimitDistance || pX < this.options.momentumLimitDistance || pY < this.options.momentumLimitDistance || pY > document.documentElement.clientHeight - this.options.momentumLimitDistance) { 590 | this._end(e); 591 | } 592 | } 593 | }, { 594 | key: '_end', 595 | value: function _end(e) { 596 | if (!this.enabled || this.destroyed || _util.eventType[e.type] !== this.initiated) { 597 | return; 598 | } 599 | this.initiated = false; 600 | 601 | if (this.options.preventDefault && !(0, _util.preventDefaultException)(e.target, this.options.preventDefaultException)) { 602 | e.preventDefault(); 603 | } 604 | 605 | this.trigger('touchend', { 606 | x: this.x, 607 | y: this.y 608 | }); 609 | 610 | if (this.resetPosition(this.options.bounceTime, _util.ease.bounce)) { 611 | return; 612 | } 613 | this.isInTransition = false; 614 | 615 | var newX = Math.round(this.x); 616 | var newY = Math.round(this.y); 617 | 618 | if (!this.moved) { 619 | if (this.options.wheel) { 620 | if (this.target && this.target.className === 'wheel-scroll') { 621 | var index = Math.abs(Math.round(newY / this.itemHeight)); 622 | var _offset = Math.round((this.pointY + (0, _util.offset)(this.target).top - this.itemHeight / 2) / this.itemHeight); 623 | this.target = this.items[index + _offset]; 624 | } 625 | this.scrollToElement(this.target, this.options.adjustTime, true, true, _util.ease.swipe); 626 | } else { 627 | if (this.options.tap) { 628 | (0, _util.tap)(e, this.options.tap); 629 | } 630 | 631 | if (this.options.click) { 632 | (0, _util.click)(e); 633 | } 634 | } 635 | this.trigger('scrollCancel'); 636 | return; 637 | } 638 | 639 | this.scrollTo(newX, newY); 640 | 641 | this.endTime = +new Date(); 642 | 643 | var duration = this.endTime - this.startTime; 644 | var absDistX = Math.abs(newX - this.startX); 645 | var absDistY = Math.abs(newY - this.startY); 646 | 647 | if (this._events.flick && duration < this.options.momentumLimitTime && absDistX < this.options.momentumLimitDistance && absDistY < this.options.momentumLimitDistance) { 648 | this.trigger('flick'); 649 | return; 650 | } 651 | 652 | var time = 0; 653 | 654 | if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) { 655 | var momentumX = this.hasHorizontalScroll ? (0, _util.momentum)(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options) : { destination: newX, duration: 0 }; 656 | var momentumY = this.hasVerticalScroll ? (0, _util.momentum)(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options) : { destination: newY, duration: 0 }; 657 | newX = momentumX.destination; 658 | newY = momentumY.destination; 659 | time = Math.max(momentumX.duration, momentumY.duration); 660 | this.isInTransition = 1; 661 | } else { 662 | if (this.options.wheel) { 663 | newY = Math.round(newY / this.itemHeight) * this.itemHeight; 664 | time = this.options.adjustTime; 665 | } 666 | } 667 | 668 | var easing = _util.ease.swipe; 669 | if (this.options.snap) { 670 | var snap = this._nearestSnap(newX, newY); 671 | this.currentPage = snap; 672 | time = this.options.snapSpeed || Math.max(Math.max(Math.min(Math.abs(newX - snap.x), 1000), Math.min(Math.abs(newY - snap.y), 1000)), 300); 673 | newX = snap.x; 674 | newY = snap.y; 675 | 676 | this.directionX = 0; 677 | this.directionY = 0; 678 | easing = _util.ease.bounce; 679 | } 680 | 681 | if (newX !== this.x || newY !== this.y) { 682 | if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) { 683 | easing = _util.ease.swipeBounce; 684 | } 685 | this.scrollTo(newX, newY, time, easing); 686 | return; 687 | } 688 | 689 | if (this.options.wheel) { 690 | this.selectedIndex = Math.abs(this.y / this.itemHeight) | 0; 691 | } 692 | this.trigger('scrollEnd'); 693 | } 694 | }, { 695 | key: '_resize', 696 | value: function _resize() { 697 | var _this3 = this; 698 | 699 | if (!this.enabled) { 700 | return; 701 | } 702 | 703 | clearTimeout(this.resizeTimeout); 704 | this.resizeTimeout = setTimeout(function () { 705 | _this3.refresh(); 706 | }, this.options.resizePolling); 707 | } 708 | }, { 709 | key: '_startProbe', 710 | value: function _startProbe() { 711 | (0, _util.cancelAnimationFrame)(this.probeTimer); 712 | this.probeTimer = (0, _util.requestAnimationFrame)(probe); 713 | 714 | var me = this; 715 | 716 | function probe() { 717 | var pos = me.getComputedPosition(); 718 | me.trigger('scroll', pos); 719 | if (me.isInTransition) { 720 | me.probeTimer = (0, _util.requestAnimationFrame)(probe); 721 | } 722 | } 723 | } 724 | }, { 725 | key: '_transitionTime', 726 | value: function _transitionTime() { 727 | var _this4 = this; 728 | 729 | var time = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; 730 | 731 | this.scrollerStyle[_util.style.transitionDuration] = time + 'ms'; 732 | 733 | if (this.options.wheel && !_util.isBadAndroid) { 734 | for (var i = 0; i < this.items.length; i++) { 735 | this.items[i].style[_util.style.transitionDuration] = time + 'ms'; 736 | } 737 | } 738 | 739 | if (!time && _util.isBadAndroid) { 740 | this.scrollerStyle[_util.style.transitionDuration] = '0.001s'; 741 | 742 | (0, _util.requestAnimationFrame)(function () { 743 | if (_this4.scrollerStyle[_util.style.transitionDuration] === '0.0001ms') { 744 | _this4.scrollerStyle[_util.style.transitionDuration] = '0s'; 745 | } 746 | }); 747 | } 748 | } 749 | }, { 750 | key: '_transitionTimingFunction', 751 | value: function _transitionTimingFunction(easing) { 752 | this.scrollerStyle[_util.style.transitionTimingFunction] = easing; 753 | 754 | if (this.options.wheel && !_util.isBadAndroid) { 755 | for (var i = 0; i < this.items.length; i++) { 756 | this.items[i].style[_util.style.transitionTimingFunction] = easing; 757 | } 758 | } 759 | } 760 | }, { 761 | key: '_transitionEnd', 762 | value: function _transitionEnd(e) { 763 | if (e.target !== this.scroller || !this.isInTransition) { 764 | return; 765 | } 766 | 767 | this._transitionTime(); 768 | if (!this.resetPosition(this.options.bounceTime, _util.ease.bounce)) { 769 | this.isInTransition = false; 770 | this.trigger('scrollEnd'); 771 | } 772 | } 773 | }, { 774 | key: '_translate', 775 | value: function _translate(x, y) { 776 | if (this.options.useTransform) { 777 | this.scrollerStyle[_util.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ; 778 | } else { 779 | x = Math.round(x); 780 | y = Math.round(y); 781 | this.scrollerStyle.left = x + 'px'; 782 | this.scrollerStyle.top = y + 'px'; 783 | } 784 | 785 | if (this.options.wheel && !_util.isBadAndroid) { 786 | for (var i = 0; i < this.items.length; i++) { 787 | var deg = this.options.rotate * (y / this.itemHeight + i); 788 | this.items[i].style[_util.style.transform] = 'rotateX(' + deg + 'deg)'; 789 | } 790 | } 791 | 792 | this.x = x; 793 | this.y = y; 794 | } 795 | }, { 796 | key: 'enable', 797 | value: function enable() { 798 | this.enabled = true; 799 | } 800 | }, { 801 | key: 'disable', 802 | value: function disable() { 803 | this.enabled = false; 804 | } 805 | }, { 806 | key: 'refresh', 807 | value: function refresh() { 808 | var rf = this.wrapper.offsetHeight; 809 | 810 | this.wrapperWidth = parseInt(this.wrapper.style.width) || this.wrapper.clientWidth; 811 | this.wrapperHeight = parseInt(this.wrapper.style.height) || this.wrapper.clientHeight; 812 | 813 | this.scrollerWidth = parseInt(this.scroller.style.width) || this.scroller.clientWidth; 814 | this.scrollerHeight = parseInt(this.scroller.style.height) || this.scroller.clientHeight; 815 | if (this.options.wheel) { 816 | this.items = this.scroller.children; 817 | this.options.itemHeight = this.itemHeight = this.items.length ? this.items[0].clientHeight : 0; 818 | if (this.selectedIndex === undefined) { 819 | this.selectedIndex = this.options.selectedIndex; 820 | } 821 | this.options.startY = -this.selectedIndex * this.itemHeight; 822 | this.maxScrollX = 0; 823 | this.maxScrollY = -this.itemHeight * (this.items.length - 1); 824 | } else { 825 | this.maxScrollX = this.wrapperWidth - this.scrollerWidth; 826 | this.maxScrollY = this.wrapperHeight - this.scrollerHeight; 827 | } 828 | 829 | this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0; 830 | this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0; 831 | 832 | if (!this.hasHorizontalScroll) { 833 | this.maxScrollX = 0; 834 | this.scrollerWidth = this.wrapperWidth; 835 | } 836 | 837 | if (!this.hasVerticalScroll) { 838 | this.maxScrollY = 0; 839 | this.scrollerHeight = this.wrapperHeight; 840 | } 841 | 842 | this.endTime = 0; 843 | this.directionX = 0; 844 | this.directionY = 0; 845 | this.wrapperOffset = (0, _util.offset)(this.wrapper); 846 | 847 | this.trigger('refresh'); 848 | 849 | this.resetPosition(); 850 | } 851 | }, { 852 | key: 'resetPosition', 853 | value: function resetPosition() { 854 | var time = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; 855 | var easeing = arguments.length <= 1 || arguments[1] === undefined ? _util.ease.bounce : arguments[1]; 856 | 857 | var x = this.x; 858 | if (!this.hasHorizontalScroll || x > 0) { 859 | x = 0; 860 | } else if (x < this.maxScrollX) { 861 | x = this.maxScrollX; 862 | } 863 | 864 | var y = this.y; 865 | if (!this.hasVerticalScroll || y > 0) { 866 | y = 0; 867 | } else if (y < this.maxScrollY) { 868 | y = this.maxScrollY; 869 | } 870 | 871 | if (x === this.x && y === this.y) { 872 | return false; 873 | } 874 | 875 | this.scrollTo(x, y, time, easeing); 876 | 877 | return true; 878 | } 879 | }, { 880 | key: 'wheelTo', 881 | value: function wheelTo(selectIndex) { 882 | if (this.options.wheel) { 883 | this.y = -selectIndex * this.itemHeight; 884 | this.scrollTo(0, this.y); 885 | } 886 | } 887 | }, { 888 | key: 'scrollBy', 889 | value: function scrollBy(x, y) { 890 | var time = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2]; 891 | var easing = arguments.length <= 3 || arguments[3] === undefined ? _util.ease.bounce : arguments[3]; 892 | 893 | x = this.x + x; 894 | y = this.y + y; 895 | 896 | this.scrollTo(x, y, time, easing); 897 | } 898 | }, { 899 | key: 'scrollTo', 900 | value: function scrollTo(x, y, time) { 901 | var easing = arguments.length <= 3 || arguments[3] === undefined ? _util.ease.bounce : arguments[3]; 902 | 903 | this.isInTransition = this.options.useTransition && time > 0 && (x !== this.x || y !== this.y); 904 | 905 | if (!time || this.options.useTransition) { 906 | this._transitionTimingFunction(easing.style); 907 | this._transitionTime(time); 908 | this._translate(x, y); 909 | 910 | if (time && this.options.probeType === 3) { 911 | this._startProbe(); 912 | } 913 | 914 | if (this.options.wheel) { 915 | if (y > 0) { 916 | this.selectedIndex = 0; 917 | } else if (y < this.maxScrollY) { 918 | this.selectedIndex = this.items.length - 1; 919 | } else { 920 | this.selectedIndex = Math.abs(y / this.itemHeight) | 0; 921 | } 922 | } 923 | } 924 | } 925 | }, { 926 | key: 'getSelectedIndex', 927 | value: function getSelectedIndex() { 928 | return this.options.wheel && this.selectedIndex; 929 | } 930 | }, { 931 | key: 'getCurrentPage', 932 | value: function getCurrentPage() { 933 | return this.options.snap && this.currentPage; 934 | } 935 | }, { 936 | key: 'scrollToElement', 937 | value: function scrollToElement(el, time, offsetX, offsetY, easing) { 938 | if (!el) { 939 | return; 940 | } 941 | el = el.nodeType ? el : this.scroller.querySelector(el); 942 | 943 | if (this.options.wheel && el.className !== 'wheel-item') { 944 | return; 945 | } 946 | 947 | var pos = (0, _util.offset)(el); 948 | pos.left -= this.wrapperOffset.left; 949 | pos.top -= this.wrapperOffset.top; 950 | 951 | if (offsetX === true) { 952 | offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2); 953 | } 954 | if (offsetY === true) { 955 | offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2); 956 | } 957 | 958 | pos.left -= offsetX || 0; 959 | pos.top -= offsetY || 0; 960 | pos.left = pos.left > 0 ? 0 : pos.left < this.maxScrollX ? this.maxScrollX : pos.left; 961 | pos.top = pos.top > 0 ? 0 : pos.top < this.maxScrollY ? this.maxScrollY : pos.top; 962 | 963 | if (this.options.wheel) { 964 | pos.top = Math.round(pos.top / this.itemHeight) * this.itemHeight; 965 | } 966 | 967 | time = time === undefined || time === null || time === 'auto' ? Math.max(Math.abs(this.x - pos.left), Math.abs(this.y - pos.top)) : time; 968 | 969 | this.scrollTo(pos.left, pos.top, time, easing); 970 | } 971 | }, { 972 | key: 'getComputedPosition', 973 | value: function getComputedPosition() { 974 | var matrix = window.getComputedStyle(this.scroller, null); 975 | var x = void 0; 976 | var y = void 0; 977 | 978 | if (this.options.useTransform) { 979 | matrix = matrix[_util.style.transform].split(')')[0].split(', '); 980 | x = +(matrix[12] || matrix[4]); 981 | y = +(matrix[13] || matrix[5]); 982 | } else { 983 | x = +matrix.left.replace(/[^-\d.]/g, ''); 984 | y = +matrix.top.replace(/[^-\d.]/g, ''); 985 | } 986 | 987 | return { 988 | x: x, 989 | y: y 990 | }; 991 | } 992 | }, { 993 | key: 'goToPage', 994 | value: function goToPage(x, y, time) { 995 | var easing = arguments.length <= 3 || arguments[3] === undefined ? _util.ease.bounce : arguments[3]; 996 | 997 | if (x >= this.pages.length) { 998 | x = this.pages.length - 1; 999 | } else if (x < 0) { 1000 | x = 0; 1001 | } 1002 | 1003 | if (y >= this.pages[x].length) { 1004 | y = this.pages[x].length - 1; 1005 | } else if (y < 0) { 1006 | y = 0; 1007 | } 1008 | 1009 | var posX = this.pages[x][y].x; 1010 | var posY = this.pages[x][y].y; 1011 | 1012 | time = time === undefined ? this.options.snapSpeed || Math.max(Math.max(Math.min(Math.abs(posX - this.x), 1000), Math.min(Math.abs(posY - this.y), 1000)), 300) : time; 1013 | 1014 | this.currentPage = { 1015 | x: posX, 1016 | y: posY, 1017 | pageX: x, 1018 | pageY: y 1019 | }; 1020 | this.scrollTo(posX, posY, time, easing); 1021 | } 1022 | }, { 1023 | key: 'next', 1024 | value: function next(time, easing) { 1025 | var x = this.currentPage.pageX; 1026 | var y = this.currentPage.pageY; 1027 | 1028 | x++; 1029 | if (x >= this.pages.length && this.hasVerticalScroll) { 1030 | x = 0; 1031 | y++; 1032 | } 1033 | 1034 | this.goToPage(x, y, time, easing); 1035 | } 1036 | }, { 1037 | key: 'prev', 1038 | value: function prev(time, easing) { 1039 | var x = this.currentPage.pageX; 1040 | var y = this.currentPage.pageY; 1041 | 1042 | x--; 1043 | if (x < 0 && this.hasVerticalScroll) { 1044 | x = 0; 1045 | y--; 1046 | } 1047 | 1048 | this.goToPage(x, y, time, easing); 1049 | } 1050 | }, { 1051 | key: 'destroy', 1052 | value: function destroy() { 1053 | this._removeEvents(); 1054 | 1055 | this.destroyed = true; 1056 | this.trigger('destroy'); 1057 | } 1058 | }, { 1059 | key: 'handleEvent', 1060 | value: function handleEvent(e) { 1061 | switch (e.type) { 1062 | case 'touchstart': 1063 | case 'mousedown': 1064 | this._start(e); 1065 | break; 1066 | case 'touchmove': 1067 | case 'mousemove': 1068 | this._move(e); 1069 | break; 1070 | case 'touchend': 1071 | case 'mouseup': 1072 | case 'touchcancel': 1073 | case 'mousecancel': 1074 | this._end(e); 1075 | break; 1076 | case 'orientationchange': 1077 | case 'resize': 1078 | this._resize(); 1079 | break; 1080 | case 'transitionend': 1081 | case 'webkitTransitionEnd': 1082 | case 'oTransitionEnd': 1083 | case 'MSTransitionEnd': 1084 | this._transitionEnd(e); 1085 | break; 1086 | case 'click': 1087 | if (this.enabled && !e._constructed && !/(SELECT|INPUT|TEXTAREA)/i.test(e.target.tagName)) { 1088 | e.preventDefault(); 1089 | e.stopPropagation(); 1090 | } 1091 | break; 1092 | } 1093 | } 1094 | }]); 1095 | 1096 | return BScroll; 1097 | }(_util.EventEmitter); 1098 | 1099 | ; 1100 | 1101 | /***/ }, 1102 | /* 2 */ 1103 | /***/ function(module, exports, __webpack_require__) { 1104 | 1105 | 'use strict'; 1106 | 1107 | Object.defineProperty(exports, "__esModule", { 1108 | value: true 1109 | }); 1110 | 1111 | var _dom = __webpack_require__(3); 1112 | 1113 | Object.keys(_dom).forEach(function (key) { 1114 | if (key === "default" || key === "__esModule") return; 1115 | Object.defineProperty(exports, key, { 1116 | enumerable: true, 1117 | get: function get() { 1118 | return _dom[key]; 1119 | } 1120 | }); 1121 | }); 1122 | 1123 | var _env = __webpack_require__(4); 1124 | 1125 | Object.keys(_env).forEach(function (key) { 1126 | if (key === "default" || key === "__esModule") return; 1127 | Object.defineProperty(exports, key, { 1128 | enumerable: true, 1129 | get: function get() { 1130 | return _env[key]; 1131 | } 1132 | }); 1133 | }); 1134 | 1135 | var _ease = __webpack_require__(5); 1136 | 1137 | Object.keys(_ease).forEach(function (key) { 1138 | if (key === "default" || key === "__esModule") return; 1139 | Object.defineProperty(exports, key, { 1140 | enumerable: true, 1141 | get: function get() { 1142 | return _ease[key]; 1143 | } 1144 | }); 1145 | }); 1146 | 1147 | var _eventEmitter = __webpack_require__(6); 1148 | 1149 | Object.keys(_eventEmitter).forEach(function (key) { 1150 | if (key === "default" || key === "__esModule") return; 1151 | Object.defineProperty(exports, key, { 1152 | enumerable: true, 1153 | get: function get() { 1154 | return _eventEmitter[key]; 1155 | } 1156 | }); 1157 | }); 1158 | 1159 | var _momentum = __webpack_require__(7); 1160 | 1161 | Object.keys(_momentum).forEach(function (key) { 1162 | if (key === "default" || key === "__esModule") return; 1163 | Object.defineProperty(exports, key, { 1164 | enumerable: true, 1165 | get: function get() { 1166 | return _momentum[key]; 1167 | } 1168 | }); 1169 | }); 1170 | 1171 | var _lang = __webpack_require__(8); 1172 | 1173 | Object.keys(_lang).forEach(function (key) { 1174 | if (key === "default" || key === "__esModule") return; 1175 | Object.defineProperty(exports, key, { 1176 | enumerable: true, 1177 | get: function get() { 1178 | return _lang[key]; 1179 | } 1180 | }); 1181 | }); 1182 | 1183 | /***/ }, 1184 | /* 3 */ 1185 | /***/ function(module, exports) { 1186 | 1187 | 'use strict'; 1188 | 1189 | Object.defineProperty(exports, "__esModule", { 1190 | value: true 1191 | }); 1192 | exports.addEvent = addEvent; 1193 | exports.removeEvent = removeEvent; 1194 | exports.offset = offset; 1195 | exports.getRect = getRect; 1196 | exports.preventDefaultException = preventDefaultException; 1197 | exports.tap = tap; 1198 | exports.click = click; 1199 | exports.prepend = prepend; 1200 | exports.before = before; 1201 | var elementStyle = document.createElement('div').style; 1202 | 1203 | var vendor = function () { 1204 | var transformNames = { 1205 | webkit: 'webkitTransform', 1206 | Moz: 'MozTransform', 1207 | O: 'OTransform', 1208 | ms: 'msTransform', 1209 | standard: 'transform' 1210 | }; 1211 | 1212 | for (var key in transformNames) { 1213 | if (elementStyle[transformNames[key]] !== undefined) { 1214 | return key; 1215 | } 1216 | } 1217 | 1218 | return false; 1219 | }(); 1220 | 1221 | function prefixStyle(style) { 1222 | if (vendor === false) { 1223 | return false; 1224 | } 1225 | 1226 | if (vendor === 'standard') { 1227 | return style; 1228 | } 1229 | 1230 | return vendor + style.charAt(0).toUpperCase() + style.substr(1); 1231 | } 1232 | 1233 | function addEvent(el, type, fn, capture) { 1234 | el.addEventListener(type, fn, { passive: false, capture: !!capture }); 1235 | }; 1236 | 1237 | function removeEvent(el, type, fn, capture) { 1238 | el.removeEventListener(type, fn, !!capture); 1239 | }; 1240 | 1241 | function offset(el) { 1242 | var left = 0; 1243 | var top = 0; 1244 | 1245 | while (el) { 1246 | left -= el.offsetLeft; 1247 | top -= el.offsetTop; 1248 | el = el.offsetParent; 1249 | } 1250 | 1251 | return { 1252 | left: left, 1253 | top: top 1254 | }; 1255 | }; 1256 | 1257 | var transform = prefixStyle('transform'); 1258 | 1259 | var hasPerspective = exports.hasPerspective = prefixStyle('perspective') in elementStyle; 1260 | var hasTouch = exports.hasTouch = 'ontouchstart' in window; 1261 | var hasTransform = exports.hasTransform = transform !== false; 1262 | var hasTransition = exports.hasTransition = prefixStyle('transition') in elementStyle; 1263 | 1264 | var style = exports.style = { 1265 | transform: transform, 1266 | transitionTimingFunction: prefixStyle('transitionTimingFunction'), 1267 | transitionDuration: prefixStyle('transitionDuration'), 1268 | transitionDelay: prefixStyle('transitionDelay'), 1269 | transformOrigin: prefixStyle('transformOrigin'), 1270 | transitionEnd: prefixStyle('transitionEnd') 1271 | }; 1272 | 1273 | var TOUCH_EVENT = 1; 1274 | var MOUSE_EVENT = 2; 1275 | var eventType = exports.eventType = { 1276 | touchstart: TOUCH_EVENT, 1277 | touchmove: TOUCH_EVENT, 1278 | touchend: TOUCH_EVENT, 1279 | 1280 | mousedown: MOUSE_EVENT, 1281 | mousemove: MOUSE_EVENT, 1282 | mouseup: MOUSE_EVENT 1283 | }; 1284 | 1285 | function getRect(el) { 1286 | if (el instanceof window.SVGElement) { 1287 | var rect = el.getBoundingClientRect(); 1288 | return { 1289 | top: rect.top, 1290 | left: rect.left, 1291 | width: rect.width, 1292 | height: rect.height 1293 | }; 1294 | } else { 1295 | return { 1296 | top: el.offsetTop, 1297 | left: el.offsetLeft, 1298 | width: el.offsetWidth, 1299 | height: el.offsetHeight 1300 | }; 1301 | } 1302 | }; 1303 | 1304 | function preventDefaultException(el, exceptions) { 1305 | for (var i in exceptions) { 1306 | if (exceptions[i].test(el[i])) { 1307 | return true; 1308 | } 1309 | } 1310 | return false; 1311 | } 1312 | 1313 | function tap(e, eventName) { 1314 | var ev = document.createEvent('Event'); 1315 | ev.initEvent(eventName, true, true); 1316 | ev.pageX = e.pageX; 1317 | ev.pageY = e.pageY; 1318 | e.target.dispatchEvent(ev); 1319 | }; 1320 | 1321 | function click(e) { 1322 | var target = e.target; 1323 | 1324 | if (!/(SELECT|INPUT|TEXTAREA)/i.test(target.tagName)) { 1325 | var ev = document.createEvent(window.MouseEvent ? 'MouseEvents' : 'Event'); 1326 | ev.initEvent('click', true, true); 1327 | ev._constructed = true; 1328 | target.dispatchEvent(ev); 1329 | } 1330 | }; 1331 | 1332 | function prepend(el, target) { 1333 | if (target.firstChild) { 1334 | before(el, target.firstChild); 1335 | } else { 1336 | target.appendChild(el); 1337 | } 1338 | } 1339 | 1340 | function before(el, target) { 1341 | target.parentNode.insertBefore(el, target); 1342 | } 1343 | 1344 | /***/ }, 1345 | /* 4 */ 1346 | /***/ function(module, exports) { 1347 | 1348 | "use strict"; 1349 | 1350 | Object.defineProperty(exports, "__esModule", { 1351 | value: true 1352 | }); 1353 | var isBadAndroid = exports.isBadAndroid = /Android /.test(window.navigator.appVersion) && !/Chrome\/\d/.test(window.navigator.appVersion); 1354 | 1355 | /***/ }, 1356 | /* 5 */ 1357 | /***/ function(module, exports) { 1358 | 1359 | 'use strict'; 1360 | 1361 | Object.defineProperty(exports, "__esModule", { 1362 | value: true 1363 | }); 1364 | var ease = exports.ease = { 1365 | swipe: { 1366 | style: 'cubic-bezier(0.23, 1, 0.32, 1)', 1367 | fn: function fn(t) { 1368 | return 1 + --t * t * t * t * t; 1369 | } 1370 | }, 1371 | 1372 | swipeBounce: { 1373 | style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 1374 | fn: function fn(t) { 1375 | return t * (2 - t); 1376 | } 1377 | }, 1378 | 1379 | bounce: { 1380 | style: 'cubic-bezier(0.165, 0.84, 0.44, 1)', 1381 | fn: function fn(t) { 1382 | return 1 - --t * t * t * t; 1383 | } 1384 | } 1385 | }; 1386 | 1387 | /***/ }, 1388 | /* 6 */ 1389 | /***/ function(module, exports) { 1390 | 1391 | "use strict"; 1392 | 1393 | Object.defineProperty(exports, "__esModule", { 1394 | value: true 1395 | }); 1396 | 1397 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 1398 | 1399 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1400 | 1401 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 1402 | 1403 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1404 | 1405 | var EventEmitter = exports.EventEmitter = function () { 1406 | function EventEmitter() { 1407 | _classCallCheck(this, EventEmitter); 1408 | 1409 | this._events = {}; 1410 | } 1411 | 1412 | _createClass(EventEmitter, [{ 1413 | key: "on", 1414 | value: function on(type, fn) { 1415 | var context = arguments.length <= 2 || arguments[2] === undefined ? this : arguments[2]; 1416 | 1417 | if (!this._events[type]) { 1418 | this._events[type] = []; 1419 | } 1420 | 1421 | this._events[type].push([fn, context]); 1422 | } 1423 | }, { 1424 | key: "once", 1425 | value: function once(type, fn) { 1426 | var context = arguments.length <= 2 || arguments[2] === undefined ? this : arguments[2]; 1427 | 1428 | var fired = false; 1429 | 1430 | function magic() { 1431 | this.off(type, magic); 1432 | 1433 | if (!fired) { 1434 | fired = true; 1435 | fn.apply(context, arguments); 1436 | } 1437 | } 1438 | 1439 | this.on(type, magic); 1440 | } 1441 | }, { 1442 | key: "off", 1443 | value: function off(type, fn) { 1444 | var _events = this._events[type]; 1445 | if (!_events) { 1446 | return; 1447 | } 1448 | 1449 | var count = _events.length; 1450 | while (count--) { 1451 | if (_events[count][0] === fn) { 1452 | _events[count][0] = undefined; 1453 | } 1454 | } 1455 | } 1456 | }, { 1457 | key: "trigger", 1458 | value: function trigger(type) { 1459 | var events = this._events[type]; 1460 | if (!events) { 1461 | return; 1462 | } 1463 | 1464 | var len = events.length; 1465 | var eventsCopy = [].concat(_toConsumableArray(events)); 1466 | for (var i = 0; i < len; i++) { 1467 | var event = eventsCopy[i]; 1468 | 1469 | var _event = _slicedToArray(event, 2); 1470 | 1471 | var fn = _event[0]; 1472 | var context = _event[1]; 1473 | 1474 | if (fn) { 1475 | fn.apply(context, [].slice.call(arguments, 1)); 1476 | } 1477 | } 1478 | } 1479 | }]); 1480 | 1481 | return EventEmitter; 1482 | }(); 1483 | 1484 | /***/ }, 1485 | /* 7 */ 1486 | /***/ function(module, exports) { 1487 | 1488 | "use strict"; 1489 | 1490 | Object.defineProperty(exports, "__esModule", { 1491 | value: true 1492 | }); 1493 | exports.momentum = momentum; 1494 | function momentum(current, start, time, lowerMargin, wrapperSize, options) { 1495 | var distance = current - start; 1496 | var speed = Math.abs(distance) / time; 1497 | 1498 | var deceleration = options.deceleration; 1499 | var itemHeight = options.itemHeight; 1500 | var swipeBounceTime = options.swipeBounceTime; 1501 | var bounceTime = options.bounceTime; 1502 | 1503 | var duration = options.swipeTime; 1504 | var rate = options.wheel ? 4 : 15; 1505 | 1506 | var destination = current + speed / deceleration * (distance < 0 ? -1 : 1); 1507 | 1508 | if (options.wheel && itemHeight) { 1509 | destination = Math.round(destination / itemHeight) * itemHeight; 1510 | } 1511 | 1512 | if (destination < lowerMargin) { 1513 | destination = wrapperSize ? lowerMargin - wrapperSize / rate * speed : lowerMargin; 1514 | duration = swipeBounceTime - bounceTime; 1515 | } else if (destination > 0) { 1516 | destination = wrapperSize ? wrapperSize / rate * speed : 0; 1517 | duration = swipeBounceTime - bounceTime; 1518 | } 1519 | 1520 | return { 1521 | destination: Math.round(destination), 1522 | duration: duration 1523 | }; 1524 | }; 1525 | 1526 | /***/ }, 1527 | /* 8 */ 1528 | /***/ function(module, exports) { 1529 | 1530 | "use strict"; 1531 | 1532 | Object.defineProperty(exports, "__esModule", { 1533 | value: true 1534 | }); 1535 | exports.extend = extend; 1536 | function extend(target, source) { 1537 | for (var key in source) { 1538 | target[key] = source[key]; 1539 | } 1540 | }; 1541 | 1542 | var DEFAULT_INTERVAL = 100 / 60; 1543 | 1544 | var requestAnimationFrame = exports.requestAnimationFrame = function () { 1545 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { 1546 | return window.setTimeout(callback, (callback.interval || DEFAULT_INTERVAL) / 2); 1547 | }; 1548 | }(); 1549 | 1550 | var cancelAnimationFrame = exports.cancelAnimationFrame = function () { 1551 | return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || function (id) { 1552 | window.clearTimeout(id); 1553 | }; 1554 | }(); 1555 | 1556 | /***/ } 1557 | /******/ ]) 1558 | }); 1559 | ; --------------------------------------------------------------------------------