23web app實現上下左右滑動

標籤：style   blog   http   color   2014   art   

轉載請說明出處：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>