23web app swipe up or down

Source: Internet
Author: User

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>   


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.