财神道app下载最新版本-财神到购彩大厅(彩世界)

热门关键词: 财神道app下载最新版本,财神到购彩大厅

jQuery实现360°全景拖动体现

jQuery实现360°全景拖动展示,jquery360全景

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>

js

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

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

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

CSS 复制代码 代码如下: html,body{background:#333;} #loading{left:0;top:0;width:100%;height:100%;background:#333;color:...

帮客评论

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

jQuery实现360°全景拖动展示

 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>

 

js

 

代码如下:

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

 

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

 

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

360全景就是视角超过人的正常视角的图像,而我们这里说的全景特指水平视角360度,垂直视角180度的图像。可以...

复制代码 代码如下:

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • php数组随机排序实现方法
  • IDisposable接口
  • Java与微信不得不说的故事——实现微信公众
  • SVG绘图(二) —— 渲染满天星辰,svg满天
  • 基于jQuery图片元素网格布局插件,jquery网格布
  • 九款酷炫基于jquery实现的应用及源码,九款

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

js

复制代码 代码如下:

});
</script>

jQuery实现360°全景拖动体现。复制代码 代码如下:

HTML

您可能感兴趣的文章:

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)
  • jquery拖动层效果插件用法实例分析(附demo源码)
  • 使用jQuery的easydrag插件实现可拖动的DIV弹出框
  • jquery div拖动效果示例代码
  • JQuery 表格操作(交替显示、拖动表格行、选择行等)
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • jquery 图片缩放拖动的简单实例
  • jQuery实现DIV层淡入淡出拖动特效的方法
  • jquery实现可拖动DIV自定义保存到数据的实例
  • jQuery实现拖动调整表格单元格大小的代码实例
  • jQuery实现移动端滑块拖动选择数字效果
  • jQuery实现的跨容器无缝拖动效果代码

jQuery实现360°全景拖动体现。<div id="demo" class="px hide"><img /></div>
<div id="loading" class="px"><span class="pa"></span></div>

复制代码 代码如下:

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

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

(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){
jQuery实现360°全景拖动体现。            isDrag=false;
        });
        $(document).on('mouseleave',function(e){
            isDrag=false;
        });
        return this;
    };
})(jQuery);

drag.js

CSS

本文由财神道app下载最新版本发布于web前端,转载请注明出处:jQuery实现360°全景拖动体现