jQuery实现360°全景拖动展示(2)


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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfypx.html