Reprint please indicate source: http://blog.csdn.net/wowkk/article/category/1619287 (Creative series)
/* Recent projects require an Apple computer, so if you support student entrepreneurship and are willing to sponsor one of us, please contact me QQ696619, you can get 16 pages of creative documents in advance, or we can help develop some small projects * *
Originally wanted to do an effect: swipe up or down the page, can switch to the picture (table layout).
The effect was achieved, but not yet applied.
--------Picture Slide navigation---------var StartX; Touch the starting horizontal axis var starty; Touch start ordinate var movespave; Distance to move var Ismovex = true; Infer whether to move var IsFirst = True for left and right; Whether to infer Touchmove direction $ ("#imgSelect"). On ("Touchstart touchmove touchend touchcancel", function (e) { E.preventdefault (); The area is not allowed to slide to toggle the page if (E.originalevent.type = = "Touchstart") {StartX = E.originalevent.touch Es[0].pagex; Touch Start position Assignment starty = e.originalevent.touches[0].pagey; Touch Start position Assignment 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:ismov EX = false; IsFirst = False; Return } if (Ismovex) {//horizontal slide movespave = movex-startx; } else {//vertical slide Movespave = Movey-starty ; }} else if (E.originalevent.type = = "Touchend") {if (Ismovex) { if (Movespave < 0 && J <= 2) {//swipe left ADD ("#topLight", j+1); switch corresponding Lamp j = j + 1; } else if (Movespave > 0 && J >= 1) {//Swipe right Sub ("#topLight", j+1); j = j-1; }} else {if (Movespave < 0 && I <= 2) { Swipe up ADD ("#rightLight", i + 1); Switch the corresponding lamp i = i + 1; } else if (Movespave > 0 && I >= 1) {//Swipe down Sub ("#rightLight", i + 1); Switch the corresponding lamp 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" ><!--Horizontal Light-- </span> <div id= "rightlight" ><!--Vertical Indicator-- </div>