首页 > 代码库 > 23web app实现上下左右滑动
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=http://www.mamicode.com/"img/Select_On.png" />>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。