Zepto实战练习(2)_JS交互功能实现

index.js

/**
 * Created by zhiyongYan on 2017/3/6.
 */
$(function () {
	//初始化坐标变量
	var last = {row:0,col:0};
	var now = {row:1,col:1};
	//初始化四个方向变量
	var direction = {up:1,right:2,down:3,left:4};
	//初始化是否移动变量
	var isMoving = false;


	//向上滑动
	$(document).swipeUp(function () {
		if(isMoving){
			return;
		}
		//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面
		last.row = now.row;
		last.col = now.col;
		//判断滑动的条件  滑动所需参数的设置
		if(last.col!=5){
			now.row = 1;
			now.col = last.col + 1;
			pageMove(direction.up);
		}
	});

	//向下滑动
	$(document).swipeDown(function () {
		if(isMoving){
			return;
		}
		//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面
		last.row = now.row;
		last.col = now.col;
		//判断滑动的条件  滑动所需参数的设置
		if(last.col!=1){
			now.row = 1;
			now.col = last.col - 1;
			pageMove(direction.down);
		}
	});

	//向左滑动
	$(document).swipeLeft(function () {
		if(isMoving){
			return;
		}
		//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面
		last.row = now.row;
		last.col = now.col;
		//判断滑动的条件  滑动所需参数的设置
		if(last.col>1&&last.col<5&&last.row==1){
			now.row = last.row + 1;
			pageMove(direction.left);
		}
	});

	//向右滑动
	$(document).swipeRight(function () {
		if(isMoving){
			return;
		}
		//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面
		last.row = now.row;
		last.col = now.col;
		//判断滑动的条件  滑动所需参数的设置
		if(last.col>1&&last.col<5&&last.row==2){
			now.row = last.row - 1;
			pageMove(direction.right);
		}
	});
	
	//定义move函数
	function pageMove(dir) {
		//初始化作用的两个页面
		var lastPage = '.page-' + last.col + '-' + last.row;
		var nowPage = '.page-' + now.col + '-' + now.row;

		//初始化页面类
		var outClass = '';
		var inClass = '';
		//匹配方向
		switch (dir){
			case direction.up:
				outClass = 'pt-page-moveToTop';
				inClass = 'pt-page-moveFromBottom';
				break;
			case direction.right:
				outClass = 'pt-page-moveToRight';
				inClass = 'pt-page-moveFromLeft';
				break;
			case direction.down:
				outClass = 'pt-page-moveToBottom';
				inClass = 'pt-page-moveFromTop';
				break;
			case direction.left:
				outClass = 'pt-page-moveToLeft';
				inClass = 'pt-page-moveFromRight';
				break;
		}
		
		//为页面添加动画开始的类
		$(nowPage).removeClass('hide');

		$(lastPage).addClass(outClass);
		$(nowPage).addClass(inClass);
		isMoving = true;
		//处理动画完成时页面的类
		setTimeout(function () {
			$(lastPage).addClass('hide');
			$(lastPage).removeClass(outClass);
			$(lastPage).removeClass('page-current');
			$(lastPage).find('img').addClass('hide');

			$(nowPage).addClass('page-current');
			$(nowPage).removeClass(inClass);
			$(nowPage).find('img').removeClass('hide');
			isMoving = false;
		},600);
	}
});