背景音乐不断的解决办法 pjax

 

PJAX 解决 多页面切换 背景音乐不断的问题

使用zepto.min.js  zepto中文API

背景音乐可以一直播放，这里index局部刷新

 

解决思路：

window.history.pushState()无刷新改变url，配合ajax获取需要的页面和数据

关键点：

1)window.history.pushState(参数，网页title,网页url)  页面url无刷新改变 配合 ajax 改变内容

参考案例 1.无刷新URL替换  HTML5无刷新修改URL

2)ajax获取对应页面内容 替换到当前index页面

3）手写上下滑动事件

 <script type="text/javascript">
        /*触屏上下左右滑动*/
        var startx, starty;
        //获得角度
        function getAngle(angx, angy) {
            return Math.atan2(angy, angx) * 180 / Math.PI;
        };

        //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
        function getDirection(startx, starty, endx, endy) {
            var angx = endx - startx;
            var angy = endy - starty;
            var result = 0;

            //如果滑动距离太短
            if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
                return result;
            }

            var angle = getAngle(angx, angy);
            if (angle >= -135 && angle <= -45) {
                result = 1;
            } else if (angle > 45 && angle < 135) {
                result = 2;
            } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                result = 3;
            } else if (angle >= -45 && angle <= 45) {
                result = 4;
            }

            return result;
        }
        //手指接触屏幕
        document.addEventListener("touchstart", function(e) {
            startx = e.touches[0].pageX;
            starty = e.touches[0].pageY;
        }, false);
        //手指离开屏幕
        document.addEventListener("touchend", function(e) {
            var endx, endy;
            endx = e.changedTouches[0].pageX;
            endy = e.changedTouches[0].pageY;
            var direction = getDirection(startx, starty, endx, endy);
            switch (direction) {
                case 0:
                    /*  alert("未滑动！");*/
                    break;
                case 1:
                    /* alert("向上！")*/

                    window.history.pushState({},'','page7.html');

                    $.ajax({
                        type:"post",
                        url:'/page7.html',
                        dataType:"html",
                        success:function (data) {
                            $("#layout").remove();
                            $("body").append('<div id="layout">'+data+"</div>");
                        },
                        error:function () {
                            alert("ajax出错！")
                        }


                    })



                    break;
                case 2:
                    /* alert("向下！")*/

                    window.history.pushState({},'','page5.html');


                    $.ajax({
                        type:"post",
                        url:'/page5.html',
                        dataType:"html",
                        success:function (data) {
                            $("#layout").remove();
                            $("body").append('<div id="layout">'+data+"</div>");
                        },
                        error:function () {
                            alert("ajax出错！")
                        }


                    })



                    break;
                case 3:
                    /*alert("向左！")*/
                    break;
                case 4:
                    /*alert("向右！")*/
                    break;
                default:
            }
        }, false);

    </script>

4）index页面结构保持完整，ajax获取下一页面的代码写入index页面的div中，其他页面没有head body html标签　　

 

未解决问题 

1）滑动页面url错乱，比如9页向前一页到8页，从前几页翻滚一直到第8页面很长时间，正常直接就显示第8页内容

 

整合pjax无刷新翻页加载教程

http://tv1314.com/?plugin=gslogin 后台登录验证 值得参考

html5 history.pushState()

透过history.pushState无刷新改变url