jQuery实现360°全景拖动展示
CSS
html,body{background:#333;}
#loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}
#loadingspan{left:45%;top:40%;font:normal50pxArial;color:#fff;}
#demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}
#demoimg{border-radius:8px;border:5pxsolid#555;}
.back{font-size:18px;line-height:130%;padding:8px20px;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
<divid="demo"class="pxhide"><img/></div> <divid="loading"class="px"><spanclass="pa"></span></div>
js
<scriptsrc="scripts/jquery.js?1.11.1"></script>
<scriptsrc="scripts/jquery.drag360.js"></script>
<script>
$(function(){
$(document.body).attr({
'onSelectStart':'returnfalse;',
'oncontextmenu':'returnfalse;',
'onbeforecopy':'returnfalse;',
'oncopy':'returnfalse;',
'ondragstart':'returnfalse;',
'style':'-moz-user-select:none;-khtml-user-select:none;user-select:none;'
});
varPreload=function(images,callback){
vardone=0,val=0;
varcount=images.length;
varpreload=function(url){
varimage=$("<img/>").attr("src",url).on("load",function(){
complete();
});
};
varcomplete=function(){
done++;
val=done/count*100;
$('#loadingspan').text(Math.ceil(val)+"%");
if(done==count){
callback();
}
};
for(vari=0;i<images.length;i++){
preload(images[i]);
}
};
varimages=[
'drag/shiwaiceshi0006.jpg',
'drag/shiwaiceshi0012.jpg',
'drag/shiwaiceshi0018.jpg',
'drag/shiwaiceshi0024.jpg',
'drag/shiwaiceshi0030.jpg',
'drag/shiwaiceshi0036.jpg',
'drag/shiwaiceshi0042.jpg',
'drag/shiwaiceshi0048.jpg',
'drag/shiwaiceshi0054.jpg',
'drag/shiwaiceshi0060.jpg',
'drag/shiwaiceshi0066.jpg',
'drag/shiwaiceshi0072.jpg',
'drag/shiwaiceshi0078.jpg',
'drag/shiwaiceshi0084.jpg',
'drag/shiwaiceshi0090.jpg',
'drag/shiwaiceshi0096.jpg',
'drag/shiwaiceshi0102.jpg',
'drag/shiwaiceshi0108.jpg',
'drag/shiwaiceshi0114.jpg',
'drag/shiwaiceshi0120.jpg',
'drag/shiwaiceshi0126.jpg',
'drag/shiwaiceshi0132.jpg',
'drag/shiwaiceshi0138.jpg',
'drag/shiwaiceshi0144.jpg',
'drag/shiwaiceshi0150.jpg',
'drag/shiwaiceshi0156.jpg',
'drag/shiwaiceshi0162.jpg',
'drag/shiwaiceshi0168.jpg',
'drag/shiwaiceshi0174.jpg',
'drag/shiwaiceshi0180.jpg',
'drag/shiwaiceshi0186.jpg',
'drag/shiwaiceshi0192.jpg',
'drag/shiwaiceshi0198.jpg',
'drag/shiwaiceshi0204.jpg',
'drag/shiwaiceshi0210.jpg',
'drag/shiwaiceshi0216.jpg',
'drag/shiwaiceshi0222.jpg',
'drag/shiwaiceshi0228.jpg',
'drag/shiwaiceshi0234.jpg',
'drag/shiwaiceshi0240.jpg',
'drag/shiwaiceshi0246.jpg',
'drag/shiwaiceshi0252.jpg',
'drag/shiwaiceshi0258.jpg',
'drag/shiwaiceshi0264.jpg',
'drag/shiwaiceshi0270.jpg',
'drag/shiwaiceshi0276.jpg',
'drag/shiwaiceshi0282.jpg',
'drag/shiwaiceshi0288.jpg',
'drag/shiwaiceshi0294.jpg',
'drag/shiwaiceshi0300.jpg',
'drag/shiwaiceshi0306.jpg',
'drag/shiwaiceshi0312.jpg',
'drag/shiwaiceshi0318.jpg',
'drag/shiwaiceshi0324.jpg',
'drag/shiwaiceshi0330.jpg',
'drag/shiwaiceshi0336.jpg',
'drag/shiwaiceshi0342.jpg',
'drag/shiwaiceshi0348.jpg',
'drag/shiwaiceshi0354.jpg',
'drag/shiwaiceshi0360.jpg',
];
Preload(images,function(){
$("#loading").fadeOut();
$("#demoimg").attr("src",images[0]);
$("#demo").fadeIn();
$("#demoimg").drag360(images);
});
}); </script>