jQuery实现360°全景拖动展示_jquery

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

js

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

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