复制代码 代码如下:
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><img /></div>
<div><span></span></div>
js
复制代码 代码如下:
<script src="scripts/jquery.js?1.11.1"></script>
<script src="https://www.jb51.net/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
复制代码 代码如下: