360°全景拖动展示例子_JQuery360度全景展示Demo
程序员文章站
2022-03-01 16:03:32
...
今天做了一个小Demo、通过推动鼠标全方位展示图片、非常棒、可以通过此功能来实现地图的滚动等
实现方法呢就是通过拍摄很多张图片来动态加载实现的、下载是html的代码
<body> <div id="demo" class="px hide"><img /></div> <div id="loading" class="px"><span class="pa"></span></div> <a href="http://dwtedx.com" target="_blank" id="back-home" class="px back">dwtedx个人博客</a> <a href="http://dwtedx.com" target="_blank" id="back-article" class="px back">返回</a> <a href="http://dwtedx.com/itshare_203.html" target="_blank" id="back-download" class="px back">下载</a> </body>大家可以看到上面就放了两个 DIV，A标签可以忽略、那么下载就贴出来最重要的JS代码
$(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);
});
好了、通过以上代码就可以实现360度展现图片了、但是前提是你得准备很多张图片来切换
最后还是给大家贴出源代码链接: http://dwtedx.com/download.html?bdkey=s/1bnfDXeB 密码: aqlt