转载请说明出处：http://blog.csdn.net/wowkk/article/category/1619287 （创意系列）
/*近期项目需要苹果电脑，如果您支持学生创业并愿意赞助我们一台，请联系我QQ696619，您可以提前获取16页创意文档，或者我们可以帮助开发一些小项目*/
原本要做一种效果：上下左右滑动页面，可以切换到图片（表格布局）。
效果实现了，但还没应用上。
//--------图片滑动导航---------
var startX; //触摸起始横坐标
var startY; //触摸起始纵坐标
var moveSpave; //移动的距离
var isMoveX = true; //判断是否为左右移动
var isFirst = true; //是否要判断touchmove方向
$("#imgSelect").on("touchstart touchmove touchend touchcancel", function (e) {
e.preventDefault(); //该区域禁止滑动切换页面
if (e.originalEvent.type == "touchstart") {
startX = e.originalEvent.touches[0].pageX; //触摸起始位置赋值
startY = e.originalEvent.touches[0].pageY; //触摸起始位置赋值
isFirst = true;
}
else if (e.originalEvent.type == "touchmove") {
var moveX = e.originalEvent.touches[0].pageX
var moveY = e.originalEvent.touches[0].pageY;
if (isFirst) {
Math.abs(moveX - startX) - Math.abs(moveY - startY) >= 2 ? isMoveX = true : isMoveX = false;
isFirst = false;
return;
}
if (isMoveX) {
//水平滑动
moveSpave = moveX - startX;
}
else {
//竖直滑动
moveSpave = moveY - startY;
}
}
else if (e.originalEvent.type == "touchend") {
if (isMoveX) {
if (moveSpave < 0 && j <= 2) {
//向左滑动
Add("#topLight", j+1); //开关对应灯
j = j + 1;
}
else if (moveSpave > 0 && j >= 1) {
//向右滑动
Sub("#topLight", j+1);
j = j - 1;
}
}
else {
if (moveSpave < 0 && i <= 2) {
//向上滑动
Add("#rightLight", i + 1); //开关对应灯
i = i + 1;
}
else if (moveSpave > 0 && i >= 1) {
//向下滑动
Sub("#rightLight", i + 1); //开关对应灯
i = i - 1;
}
}
$("#imgClick").attr("src", arrImg[i][j]);
}
//------
function Add(id, x) {
var idd = id + x;
$(idd).attr("src", "img/Select_Off.png");
x = x + 1;
idd = id + x;
$(idd).attr("src", "img/Select_On.png");
}
function Sub(id, x) {
var idd = id + x;
$(idd).attr("src", "img/Select_Off.png");
x = x - 1;
idd = id + x;
$(idd).attr("src", "img/Select_On.png");
}
<span id="topLight"><!--横向指示灯-->
<img id="topLight1" src="img/Select_On.png" />
<img id="topLight2" src="img/Select_Off.png" />
<img id="topLight3" src="img/Select_Off.png" />
<img id="topLight4" src="img/Select_Off.png" />
</span>
<div id="rightLight"><!--竖向指示灯-->
<img id="rightLight1" class="rightImg" src="img/Select_Off.png" />
<img id="rightLight2" class="rightImg" src="img/Select_On.png" />
<img id="rightLight3" class="rightImg" src="img/Select_Off.png" />
<img id="rightLight4" class="rightImg" src="img/Select_Off.png" />
</div>