JQuery achieves 360 ° panoramic drag display
360 panorama is an image with a view that exceeds a human's normal view. Here, the panorama refers to an image with a horizontal view of 360 degrees and a vertical view of 180 degrees. You can switch to the panoramic space to view the 360 panoramic display of different scenarios.
CSS
The Code is as follows:
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
The Code is as follows:
<Div id = "demo" class = "px hide"> </div>
<Div id = "loading" class = "px"> <span class = "pa"> </span> </div>
Js
The Code is as follows:
<Script src = "scripts/jquery. js? 1.11.1 "> </script>
<Script src = "scripts/jquery. drag360.js"> </script>
<Script>
$ (Function (){
$ (Document. body). attr ({
'Onselectstart': 'Return false ;',
'Ontextcall': 'Return false ;',
'Onbeforecopy': 'Return false ;',
'Oncopy': 'Return false ;',
'Ondragstart': 'Return false ;',
'Style': '-moz-user-select: none;-khtml-user-select: none ;'
});
Var Preload = function (images, callback ){
Var done = 0, val = 0;
Var count = images. length;
Var preload = function (url ){
Var image = $ ("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
The Code is as follows:
(Function ($ ){
$. Fn. drag360 = function (images ){
Var mdx, mmx, isDrag = false, unitStep = 40, current = 0;
Var that = $ (this );
Var length = images. length;
// Touch
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;
});
// Drag
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 );
The above is all the content of this article. I hope you will like it.
