23web app实现上下左右滑动
转载请说明出处: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>