简单的css3全屏滚动

mutongwu

浏览: 448362 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
JavaScript
mobile

css3 mobile JavaScript

<!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]) type = 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)){
				this.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"") + " active"; 
				lock = false; 
			}else{
				this.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++;
			index = index % size;
			sections[index].className = sections[index].className + " next";
		}
		
	},false);
}

</script>
</body></html>

0
顶

0
踩

分享到：

简单的css3全屏滚动-左右方向 | jquery插件treetable 的使用

2015-04-27 16:41
浏览 1449
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简单的css3全屏滚动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简单的css3全屏滚动

评论

发表评论

相关推荐

webpack简单打包PC网站前端资源

简单下拉框模拟

grunt构建基于seajs的网站实现

js平滑滚动回到顶部

fis-amd 的使用与修改

scrollMagic 视差与滚动动画GSAP

skrollr-视差滚动动画插件

stellar插件的使用

四个方向鼠标滑入的css动画

icon font VS svg font

gulp下静态资源的合并、压缩、MD5后缀

DOMContentLoaded VS onload VS onreadystatechange

简单的css3全屏滚动-左右方向

jquery插件treetable 的使用

纯CSS3的图片slider

sublime 侧边栏字体大小修改

移动端的“点透”问题

scheme缺少,ie的bug

大整数相加

getBoundingClientRect 跨浏览器实现

最近访客更多访客>>