(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);
jQuery实现360°全景拖动展示(2)
内容版权声明:除非注明,否则皆为本站原创文章。