js+css3实现手机端滚屏效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+css3实现手机端滚屏效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type">
<meta content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>js+css3实现手机端滚屏效果</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/animations.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body>
<div id="page-hd">
  <div id="loading" style="display: none;">
    <div class="spinner">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </div>
  <img src="img/icon_up.png" alt="" class="arrow-up pt-page-moveIconUp"> </div>
<div id="page-content">
  <div class="page page-1 page-current"></div>
  <div class="page page-2 hide"></div>
  <div class="page page-3 hide"></div>
  <div class="page page-4 hide"></div>
  <div class="page page-5 hide"></div>
  <div class="page page-6 hide"></div>
  <div class="page page-7 hide"></div>
  <div class="page page-8 hide"></div>
  <div class="page page-9 hide">
    <div class="btn-group"> <a href="#"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_joinus.png" alt=""> </a><br>
      <a href="#"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_weixin.png" alt=""> </a> </div>
  </div>
</div>
<div id="page-ft"></div>
<script type="text/javascript" src="js/zepto.min.js"></script> 
<script type="text/javascript" src="js/touch.js"></script> 
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

(function(){
	//配置var config ={
	'audio':{
	'icon':'audio-record-play','text':true}
,'loading':'loading-ic'}
;
	//loadingwindow.onload = function(){
	$('#loading').hide();
}
//分享$('#js-btn-share').bind('tap',function(){
	$('#js-share').show();
}
)$('#js-share').bind('tap',function(){
	$(this).hide();
}
);
	var pageIndex = 1,pageTotal = $('.page').length,towards ={
	up:1,right:2,down:3,left:4}
,isAnimating = false;
	//禁用手机默认的触屏滚动行为document.addEventListener('touchmove',function(event){
	event.preventDefault();
}
,false);
	$(document).swipeUp(function(){
	if (isAnimating) return;
	if (pageIndex < pageTotal){
	pageIndex+=1;
}
else{
	pageIndex=1;
}
;
	pageMove(towards.up);
}
)$(document).swipeDown(function(){
	if (isAnimating) return;
	if (pageIndex > 1){
	pageIndex-=1;
}
else{
	pageIndex=pageTotal;
}
;
	pageMove(towards.down);
}
)function pageMove(tw){
	var lastPage;
	if(tw=='1'){
	if(pageIndex==1){
	lastPage = ".page-"+pageTotal;
}
else{
	lastPage = ".page-"+(pageIndex-1);
}
}
else if(tw=='3'){
	if(pageIndex==pageTotal){
	lastPage = ".page-1";
}
else{
	lastPage = ".page-"+(pageIndex+1);
}
}
var nowPage = ".page-"+pageIndex;
	switch(tw){
	case towards.up:outClass = 'pt-page-moveToTop';
	inClass = 'pt-page-moveFromBottom';
	break;
	case towards.down:outClass = 'pt-page-moveToBottom';
	inClass = 'pt-page-moveFromTop';
	break;
}
isAnimating = true;
	$(nowPage).removeClass("hide");
	$(lastPage).addClass(outClass);
	$(nowPage).addClass(inClass);
	setTimeout(function(){
	$(lastPage).removeClass('page-current');
	$(lastPage).removeClass(outClass);
	$(lastPage).addClass("hide");
	$(lastPage).find("img").addClass("hide");
	$(nowPage).addClass('page-current');
	$(nowPage).removeClass(inClass);
	$(nowPage).find("img").removeClass("hide");
	isAnimating = false;
}
,600);
}
}
)();

CSS代码(reset.css):

*{margin:0;padding:0;outline:none;}
*:not(input,textarea){-webkit-touch-callout:inherit;-webkit-user-select:auto;}
body{width:100%;font-family:Hiragino Sans GB,Arial,Helvetica,"����",sans-serif;font-size:14px;color:#878787;-webkit-touch-callout:inherit;-webkit-user-select:auto;background-color:#fff;}
a{color:#878787;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover{text-decoration:none;}
button,input,select,textarea{font-size:100%;margin:0;padding:0;outline:none;}
dt,dd{display:inline-block;}
textarea,input{resize:none;outline:none;}
textarea{resize:none;-webkit-appearance:none;}
ul,ol,li{list-style:none;}
em{font-style:normal;}

附件:下载该文件资源,减少时间成本(增值服务)