23web app实现上下左右滑动

标签：html5   web 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="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>   

23web app实现上下左右滑动,布布扣,bubuko.com

23web app实现上下左右滑动

标签：html5   web app   

原文地址：http://blog.csdn.net/wowkk/article/details/24940245