手机端页面滑动效果

 查看演示  website  立即下载

请在手机上查看效果，或在浏览器中模拟手机端查看，直接电脑端浏览器无法查看效果。

============以下内容由 马云云_理想青年 提供===========

调用方法

(function(){
        
        //配置
        var config = {
        	'audio':{
        		'icon':'audio-record-play',
        		'text':true
        	},
        	'loading': 'loading-ic'
        };
        
        //loading
        window.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);
        }
        
        })();

==============以下内容由 Dreamer 提供=================

花了重金下载了这个插件，有些心得，分享分享

第一，替换page.css里面的

.page-1{ background-image: url(../img/1_01.png);}

只要替换图片路径即可设置为背景图，图1、图2以此类推。

第二，在index.html页面里面

<div class="page page-1 page-current"></div>

的各个div page里面添加元素是不能定位的，你可以添加一些navbar-fixed-bottom  （定位到底部）一些样式，我使用的是bootstrap框架，挺好用的，用navbar-fixed-top定位到头部。

第三，貌似不用引入JQ包，引入后会报错，估计是zepto.min.js这个js和jq包冲突了，在这里我就只用dom节点来实现。

第四，页面的各个图片是无限循环的，想要不循环，只要改

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);
        }

为

if(tw=='1'){
            if(pageIndex==1){
                lastPage = ".page-"+(pageTotal-1);
            }else{
                lastPage = ".page-"+(pageIndex-1);
            }
        }else if(tw=='3'){
            if(pageIndex==pageTotal){
                lastPage = ".page-1";
            }else{
                lastPage = ".page-"+(pageIndex+1);
            }
        }

就可以了。

第五，在微信浏览器使用该插件，最好清空缓存，不然修改了都没感觉！（这点可以不注意）

============== 以下代码由 draftdog 提供 =========================

这个其实是中通的那个的简化版，文件夹中有个animation的css 他都没有用，其实这个animation很有用的，每个不同的图片放上不同的animation就可以动起来了，具体做法比如

<img class="img_3 hide fadeInRight" src="img/txt1.png" />

class中 img_3定义了图片的位置，大小，等等的元素

hide自然就是隐藏

fadeInRight是渐出效果，具体的效果有很多，可以一个一个尝试

PREVIOUS:
NEXT:
动画效果的焦点图播放
格式按钮炫炫酷效果