南充网络公司_南充网站建设|南充网站设计|南充网站制作|南充网页设计|南充网页制作|南充网页开发|南充网页建设|南充网络公司|南充软件开发【南充北湖网络科技公司官方网站】

css3全屏滚动

2015-4-28 15:17| 发布者: aibeihu| 查看: 2884| 评论: 0

摘要: !DOCTYPEhtmlhtmlheadtitleqqqqqqqq/titlemetacharset="utf-8"metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/metaname="apple-mobile-w ...
  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>qqqqqqqq</title>  
  4.     <meta charset="utf-8">  
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />  
  6.     <meta name="apple-mobile-web-app-capable" content="yes"/>  
  7.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
  8.     <meta content="telephone=no" name="format-detection" />  
  9.     <link type="text/css" href="lib/normalize.css" rel="stylesheet"/>  
  10.     <style>  
  11.         body,#wrapper{min-height:100%;height:100%;overflow:hidden;}  
  12.         #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;}  
  13.         section{top:100%;left:0;opacity:0;  
  14.             }  
  15.         section.active{top:0;z-index:2;opacity:1; /*transition:all 1s;*/}  
  16.           
  17.         section.pre{  
  18.             -webkit-animation: pre 1s 1;  
  19.         }  
  20.         @-webkit-keyframes pre{  
  21.             0%{top:0;opacity:1}  
  22.             99%{top:-99%;opacity:1}  
  23.             100%{top:-100%;opacity:0}  
  24.         }  
  25.           
  26.         section.next{  
  27.             -webkit-animation: next 1s 1;  
  28.         }  
  29.         @-webkit-keyframes next{  
  30.             0%{top:100%;opacity:1;z-index:2;}  
  31.             100%{top:0;opacity:1;z-index:2;}  
  32.         }  
  33.           
  34.         .s1{background:#ccc;}  
  35.         .s2{background:gold;}  
  36.         .s3{background:pink;}  
  37.         .s4{background:green;}  
  38.         .swipeTip{position:absolute;width:3em;line-height:2em;bottom:0;left:0;right:0;margin:auto;z-index:10;text-align:center;  
  39.             color:#fff;  
  40.             background:#000;  
  41.             border-radius:100%;  
  42.             /**/-webkit-animation: st 1s infinite;  
  43.             animation: st 1s infinite;  
  44.         }  
  45.         @-webkit-keyframes st{  
  46.             0%{bottom:0;}  
  47.             50%{bottom:0.8em;}  
  48.             100%{bottom:0em;}  
  49.         }  
  50.         @keyframes st{  
  51.             0%{bottom:0;}  
  52.             50%{bottom:0.4em;}  
  53.             100%{bottom:0em;}  
  54.         }  
  55.     </style>  
  56. </head>  
  57. <body onload="init()">  
  58. <div id="wrapper">  
  59.     <section class="s1 active">  
  60.         s1  
  61.     </section>  
  62.     <section class="s2">  
  63.         s2  
  64.     </section>  
  65.     <section class="s3">  
  66.         s3  
  67.     </section>  
  68.     <section class="s4">  
  69.         s4  
  70.     </section>  
  71.       
  72.     <div class="swipeTip" id="swipeTip"></div>  
  73. </div>  
  74. <script>  
  75. var pfx = ["webkit", "moz", "MS", "o", ""];  
  76. function PrefixedEvent(element, type, callback) {  
  77.     for (var p = 0; p < pfx.length; p++) {  
  78.         if (!pfx[p]) typetype = type.toLowerCase();  
  79.         element.addEventListener(pfx[p]+type, callback, false);  
  80.     }  
  81. }  
  82. function init(){  
  83.       
  84.     var sections = document.querySelectorAll("section");  
  85.     var size = sections.length;  
  86.     var index = 0;  
  87.     var lock = false;  
  88.     for(var i=0; i < size; i++){  
  89.         PrefixedEvent(sections[i], "AnimationEnd", function(){  
  90.             if(/next/.test(this.className)){  
  91.                 thisthis.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"") + " active";   
  92.                 lock = false;   
  93.             }else{  
  94.                 thisthis.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"");   
  95.             }  
  96.               
  97.         });  
  98.     }  
  99.     document.body.addEventListener("touchmove",function(e){  
  100.         e.preventDefault();  
  101.     },false);  
  102.       
  103.       
  104.     var startX = 0;  
  105.     var startY = 0;  
  106.       
  107.     var dx = 0;  
  108.     var dy = 0;  
  109.     document.getElementById("swipeTip").addEventListener("touchstart",function(e){  
  110.         this.style.webkitAnimationPlayState = "paused";  
  111.         startX = e.touches[0].pageX;  
  112.         startY = e.touches[0].pageY;  
  113.     });  
  114.     document.getElementById("swipeTip").addEventListener("touchmove",function(e){  
  115.         e.preventDefault();  
  116.           
  117.         dx = e.touches[0].pageX - startX;  
  118.         dy = e.touches[0].pageY - startY;  
  119.     });  
  120.     document.getElementById("swipeTip").addEventListener("touchend",function(e){  
  121.         this.style.webkitAnimationPlayState = "running";  
  122.         if(lock){  
  123.             return;  
  124.         }  
  125.         //垂直方向滚动的简单判断  
  126.         if(Math.abs(dy) > Math.abs(dx)){  
  127.               
  128.             lock = true;  
  129.               
  130.             e.preventDefault();  
  131.             sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " pre";  
  132.             index++;  
  133.             indexindex = index % size;  
  134.             sections[index].className = sections[index].className + " next";  
  135.         }  
  136.           
  137.     },false);  
  138. }  
  139.   
  140. </script>  
  141. </body></html>  

鲜花

握手

雷人

路过

鸡蛋

相关分类

发布主题 官方QQ群
 
 
技术支持
在线客服
北湖网络交流群:
北湖网络
工作时间:
8:00-18:00
 

Powered by Discuz! X3.2 --© 20011-2015 南充北湖网络有限公司,all rights reserved 技术支持:北湖网络

Archiver  |  手机版  |  小黑屋  |  南充北湖网络有限公司 ( 蜀ICP备14003946号  

返回顶部