背景音乐不断的解决办法 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）手写上下滑动事件

100

101

102

103

104

105

<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>