- <!DOCTYPE html>
- <html><head>
- <title>qqqqqqqq</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
- <meta name="apple-mobile-web-app-capable" content="yes"/>
- <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
- <meta content="telephone=no" name="format-detection" />
- <link type="text/css" href="lib/normalize.css" rel="stylesheet"/>
- <style>
- body,#wrapper{min-height:100%;height:100%;overflow:hidden;}
- #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;}
- section{top:100%;left:0;opacity:0;
- }
- section.active{top:0;z-index:2;opacity:1; /*transition:all 1s;*/}
-
- section.pre{
- -webkit-animation: pre 1s 1;
- }
- @-webkit-keyframes pre{
- 0%{top:0;opacity:1}
- 99%{top:-99%;opacity:1}
- 100%{top:-100%;opacity:0}
- }
-
- section.next{
- -webkit-animation: next 1s 1;
- }
- @-webkit-keyframes next{
- 0%{top:100%;opacity:1;z-index:2;}
- 100%{top:0;opacity:1;z-index:2;}
- }
-
- .s1{background:#ccc;}
- .s2{background:gold;}
- .s3{background:pink;}
- .s4{background:green;}
- .swipeTip{position:absolute;width:3em;line-height:2em;bottom:0;left:0;right:0;margin:auto;z-index:10;text-align:center;
- color:#fff;
- background:#000;
- border-radius:100%;
- /**/-webkit-animation: st 1s infinite;
- animation: st 1s infinite;
- }
- @-webkit-keyframes st{
- 0%{bottom:0;}
- 50%{bottom:0.8em;}
- 100%{bottom:0em;}
- }
- @keyframes st{
- 0%{bottom:0;}
- 50%{bottom:0.4em;}
- 100%{bottom:0em;}
- }
- </style>
- </head>
- <body onload="init()">
- <div id="wrapper">
- <section class="s1 active">
- s1
- </section>
- <section class="s2">
- s2
- </section>
- <section class="s3">
- s3
- </section>
- <section class="s4">
- s4
- </section>
-
- <div class="swipeTip" id="swipeTip">▲</div>
- </div>
- <script>
- var pfx = ["webkit", "moz", "MS", "o", ""];
- function PrefixedEvent(element, type, callback) {
- for (var p = 0; p < pfx.length; p++) {
- if (!pfx[p]) typetype = type.toLowerCase();
- element.addEventListener(pfx[p]+type, callback, false);
- }
- }
- function init(){
-
- var sections = document.querySelectorAll("section");
- var size = sections.length;
- var index = 0;
- var lock = false;
- for(var i=0; i < size; i++){
- PrefixedEvent(sections[i], "AnimationEnd", function(){
- if(/next/.test(this.className)){
- thisthis.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"") + " active";
- lock = false;
- }else{
- thisthis.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"");
- }
-
- });
- }
- document.body.addEventListener("touchmove",function(e){
- e.preventDefault();
- },false);
-
-
- var startX = 0;
- var startY = 0;
-
- var dx = 0;
- var dy = 0;
- document.getElementById("swipeTip").addEventListener("touchstart",function(e){
- this.style.webkitAnimationPlayState = "paused";
- startX = e.touches[0].pageX;
- startY = e.touches[0].pageY;
- });
- document.getElementById("swipeTip").addEventListener("touchmove",function(e){
- e.preventDefault();
-
- dx = e.touches[0].pageX - startX;
- dy = e.touches[0].pageY - startY;
- });
- document.getElementById("swipeTip").addEventListener("touchend",function(e){
- this.style.webkitAnimationPlayState = "running";
- if(lock){
- return;
- }
- //垂直方向滚动的简单判断
- if(Math.abs(dy) > Math.abs(dx)){
-
- lock = true;
-
- e.preventDefault();
- sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " pre";
- index++;
- indexindex = index % size;
- sections[index].className = sections[index].className + " next";
- }
-
- },false);
- }
-
- </script>
- </body></html>
|