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

复制代码 代码如下:

<script><br /> $(function(){<br /> $(document.body).attr({<br /> 'onSelectStart' :'return false;',<br /> 'oncontextmenu':'return false;',<br /> 'onbeforecopy':'return false;',<br /> 'oncopy':'return false;',<br /> 'ondragstart':'return false;',<br /> 'style':'-moz-user-select:none; -khtml-user-select: none; user-select: none;'<br /> });<br /> var Preload=function(images,callback){<br /> var done=0,val=0;<br /> var count=images.length; <br /> var preload=function(url) {<br /> var image = $("<img / alt="jQuery实现360°全景拖动展示_jquery" >").attr("src", url).on("load",function () {<br /> complete();<br /> });<br /> };<br /> var complete=function() {<br /> done++;<br /> val=done/count*100;<br /> $('#loading span').text(Math.ceil(val) + "%");<br /> if(done==count){<br /> callback();<br /> }<br /> };<br /> for(var i=0;i<images.length;i++){<br /> preload(images[i]);<br /> }<br /> };<br /> var images=[<br /> 'drag/shiwai ceshi0006.jpg',<br /> 'drag/shiwai ceshi0012.jpg',<br /> 'drag/shiwai ceshi0018.jpg',<br /> 'drag/shiwai ceshi0024.jpg',<br /> 'drag/shiwai ceshi0030.jpg',<br /> 'drag/shiwai ceshi0036.jpg',<br /> 'drag/shiwai ceshi0042.jpg',<br /> 'drag/shiwai ceshi0048.jpg',<br /> 'drag/shiwai ceshi0054.jpg',<br /> 'drag/shiwai ceshi0060.jpg',<br /> 'drag/shiwai ceshi0066.jpg',<br /> 'drag/shiwai ceshi0072.jpg',<br /> 'drag/shiwai ceshi0078.jpg',<br /> 'drag/shiwai ceshi0084.jpg',<br /> 'drag/shiwai ceshi0090.jpg',<br /> 'drag/shiwai ceshi0096.jpg',<br /> 'drag/shiwai ceshi0102.jpg',<br /> 'drag/shiwai ceshi0108.jpg',<br /> 'drag/shiwai ceshi0114.jpg',<br /> 'drag/shiwai ceshi0120.jpg',<br /> 'drag/shiwai ceshi0126.jpg',<br /> 'drag/shiwai ceshi0132.jpg',<br /> 'drag/shiwai ceshi0138.jpg',<br /> 'drag/shiwai ceshi0144.jpg',<br /> 'drag/shiwai ceshi0150.jpg',<br /> 'drag/shiwai ceshi0156.jpg',<br /> 'drag/shiwai ceshi0162.jpg',<br /> 'drag/shiwai ceshi0168.jpg',<br /> 'drag/shiwai ceshi0174.jpg',<br /> 'drag/shiwai ceshi0180.jpg',<br /> 'drag/shiwai ceshi0186.jpg',<br /> 'drag/shiwai ceshi0192.jpg',<br /> 'drag/shiwai ceshi0198.jpg',<br /> 'drag/shiwai ceshi0204.jpg',<br /> 'drag/shiwai ceshi0210.jpg',<br /> 'drag/shiwai ceshi0216.jpg',<br /> 'drag/shiwai ceshi0222.jpg',<br /> 'drag/shiwai ceshi0228.jpg',<br /> 'drag/shiwai ceshi0234.jpg',<br /> 'drag/shiwai ceshi0240.jpg',<br /> 'drag/shiwai ceshi0246.jpg',<br /> 'drag/shiwai ceshi0252.jpg',<br /> 'drag/shiwai ceshi0258.jpg',<br /> 'drag/shiwai ceshi0264.jpg',<br /> 'drag/shiwai ceshi0270.jpg',<br /> 'drag/shiwai ceshi0276.jpg',<br /> 'drag/shiwai ceshi0282.jpg',<br /> 'drag/shiwai ceshi0288.jpg',<br /> 'drag/shiwai ceshi0294.jpg',<br /> 'drag/shiwai ceshi0300.jpg',<br /> 'drag/shiwai ceshi0306.jpg',<br /> 'drag/shiwai ceshi0312.jpg',<br /> 'drag/shiwai ceshi0318.jpg',<br /> 'drag/shiwai ceshi0324.jpg',<br /> 'drag/shiwai ceshi0330.jpg',<br /> 'drag/shiwai ceshi0336.jpg',<br /> 'drag/shiwai ceshi0342.jpg',<br /> 'drag/shiwai ceshi0348.jpg',<br /> 'drag/shiwai ceshi0354.jpg',<br /> 'drag/shiwai ceshi0360.jpg',<br /> ];<br /> Preload(images,function(){<br /> $("#loading").fadeOut();<br /> $("#demo img").attr("src",images[0]);<br /> $("#demo").fadeIn();<br /> $("#demo img").drag360(images);<br /> }); <p>});<br /> </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                     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);

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