jQuery實現360°全景拖動展示

2024-05-06 16:17:12

字體：大中小

來源：轉載

供稿：網友

360全景就是視角超過人的正常視角的圖像，而我們這里說的全景特指水平視角360度，垂直視角180度的圖像。可以全景空間里進行切換，達到瀏覽各個不同場景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>

復制代碼代碼如下:

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