jQuery实现360°全景拖动展示

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

　　<div id="demo" class="px hide"><img /></div>

　　<div id="loading" class="px"><span class="pa"></span></div>

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

　　(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);