23web app實現上下左右滑動
阿新 • • 發佈:2019-02-07
/*近期專案需要蘋果電腦,如果您支援學生創業並願意贊助我們一臺,請聯絡我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>