jQuery实现360°全景拖动展示

CSS
复制代码代码如下:
html,body{background:#333;}
#loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}
#loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}
#demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}
#demo img{border-radius:8px;border:5px solid #555;}
.back{font-size:18px;line-height:130%;padding:8px 20px;color:#fff;}
#back-home{left:0px;top:0px;background:#35916D;}
#back-article{right:0px;top:0px;background:#444;}
#back-download{right:0px;bottom:0px;background:#CE565D;}

HTML
复制代码代码如下:
<div id="demo" class="px hide"><img /></div>
<div id="loading" class="px"><span class="pa"></span></div>

js
复制代码代码如下:
<script src="scripts/jquery.js?1.11.1"></script>
<script src="scripts/jquery.drag360.js"></script>
<script>
$（function（）{
    $（document.body）.attr（{
      "onSelectStart" :"return false;",
      "oncontextmenu":"return false;",
      "onbeforecopy":"return false;",
      "oncopy":"return false;",
      "ondragstart":"return false;",
      "style":"-moz-user-select:none; -khtml-user-select: none; user-select: none;"
    }）;
var Preload=function（images,callback）{
  var done=0,val=0;
  var count=images.length;
  var preload=function（url） {
   var image = $（"<img />"）.attr（"src", url）.on（"load",function （） {
    complete（）;
   }）;
   };
  var complete=function（） {
   done++;
   val=done/count*100;
   $（"#loading span"）.text（Math.ceil（val） + "%"）;
   if（done==count）{
    callback（）;
   }
  };
  for（var i=0;i<images.length;i++）{
   preload（images[i]）;
  }
};
var images=[
   "drag/shiwai ceshi0006.jpg",
   "drag/shiwai ceshi0012.jpg",
   "drag/shiwai ceshi0018.jpg",
   "drag/shiwai ceshi0024.jpg",
   "drag/shiwai ceshi0030.jpg",
   "drag/shiwai ceshi0036.jpg",
   "drag/shiwai ceshi0042.jpg",
   "drag/shiwai ceshi0048.jpg",
   "drag/shiwai ceshi0054.jpg",
   "drag/shiwai ceshi0060.jpg",
   "drag/shiwai ceshi0066.jpg",
   "drag/shiwai ceshi0072.jpg",
   "drag/shiwai ceshi0078.jpg",
   "drag/shiwai ceshi0084.jpg",
   "drag/shiwai ceshi0090.jpg",
   "drag/shiwai ceshi0096.jpg",
   "drag/shiwai ceshi0102.jpg",
   "drag/shiwai ceshi0108.jpg",
   "drag/shiwai ceshi0114.jpg",
   "drag/shiwai ceshi0120.jpg",
   "drag/shiwai ceshi0126.jpg",
   "drag/shiwai ceshi0132.jpg",
   "drag/shiwai ceshi0138.jpg",
   "drag/shiwai ceshi0144.jpg",
   "drag/shiwai ceshi0150.jpg",
   "drag/shiwai ceshi0156.jpg",
   "drag/shiwai ceshi0162.jpg",
   "drag/shiwai ceshi0168.jpg",
   "drag/shiwai ceshi0174.jpg",
   "drag/shiwai ceshi0180.jpg",
   "drag/shiwai ceshi0186.jpg",
   "drag/shiwai ceshi0192.jpg",
   "drag/shiwai ceshi0198.jpg",
   "drag/shiwai ceshi0204.jpg",
   "drag/shiwai ceshi0210.jpg",
   "drag/shiwai ceshi0216.jpg",
   "drag/shiwai ceshi0222.jpg",
   "drag/shiwai ceshi0228.jpg",
   "drag/shiwai ceshi0234.jpg",
   "drag/shiwai ceshi0240.jpg",
   "drag/shiwai ceshi0246.jpg",
   "drag/shiwai ceshi0252.jpg",
   "drag/shiwai ceshi0258.jpg",
   "drag/shiwai ceshi0264.jpg",
   "drag/shiwai ceshi0270.jpg",
   "drag/shiwai ceshi0276.jpg",
   "drag/shiwai ceshi0282.jpg",
   "drag/shiwai ceshi0288.jpg",
   "drag/shiwai ceshi0294.jpg",
   "drag/shiwai ceshi0300.jpg",
   "drag/shiwai ceshi0306.jpg",
   "drag/shiwai ceshi0312.jpg",
   "drag/shiwai ceshi0318.jpg",
   "drag/shiwai ceshi0324.jpg",
   "drag/shiwai ceshi0330.jpg",
   "drag/shiwai ceshi0336.jpg",
   "drag/shiwai ceshi0342.jpg",
   "drag/shiwai ceshi0348.jpg",
   "drag/shiwai ceshi0354.jpg",
   "drag/shiwai ceshi0360.jpg",
];
Preload（images,function（）{
  $（"#loading"）.fadeOut（）;
  $（"#demo img"）.attr（"src",images[0]）;
  $（"#demo"）.fadeIn（）;
  $（"#demo img"）.drag360（images）;
}）;
}）;
</script>

drag.js
复制代码代码如下:
（function（$）{
    $.fn.drag360=function（images）{
        var mdx,mmx,isDrag=false,unitStep=40,current=0;
        var that=$（this）;
        var length=images.length;
        //触摸
        that.on（"touchstart",function（e）{
            var touch = e.originalEvent;
                mdx = touch.changedTouches[0].pageX;
                isDrag=true;
        }）.on（"touchmove",function（e）{
            e.preventDefault（）;
            touch = e.originalEvent.touches[0]||e.originalEvent.changedTouches[0];
            mmx=touch.pageX;
            if（isDrag）{
                if（Math.abs（mmx-mdx）>unitStep）{
                    if（mmx-mdx>0）{
                        current=current+1;
                    }else{
                        current=current-1;
                    }
                    mdx=mmx;
                    if（current<0）current=length-1;
                    if（current>length-1）current=0;
                    that.attr（"src",images[current]）;
                }
            }
        }）.on（"touchend",function（e）{
            isDrag=false;
        }）;
        //拖动
        that.on（"mousedown",function（e）{
            mdx=e.pageX;
            isDrag=true;
        }）.on（"mousemove",function（e）{
            mmx=e.pageX;
            if（isDrag）{
                if（Math.abs（mmx-mdx）>unitStep）{
                    current=current+（mmx-mdx>0?1:-1）;
                    mdx=mmx;
                    if（current<0）current=length-1;
                    if（current>length-1）current=0;
                    that.attr（"src",images[current]）;
                }
            }
            return false;
        }）
        $（document）.on（"mouseup",function（e）{
            isDrag=false;
        }）;
        $（document）.on（"mouseleave",function（e）{
            isDrag=false;
        }）;
        return this;
    };
}）（jQuery）;

以上所述就是本文的全部内容了，希望大家能够喜欢。