23web 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实现上下左右滑动,,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。