以下是 jQuery 360度全景图插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jQuery 360度全景图插件</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.panorama_viewer.js"></script>
<link href='panorama_viewer.css' rel='stylesheet' type='text/css'>
<style>
html {
height: 100%;
}
body {
background: #F1f1f2;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #999;
margin-bottom: 5px;
font-size: 70px;
font-weight: 100;
}
h2 {
padding: 00px 20px 30px 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
letter-spacing: 0px;
color: #888;
font-size: 20px;
line-height: 160%;
font-weight: 100;
margin-top: 10px;
margin-bottom: 0;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 55px;
font-family: 'Open Sans';
letter-spacing: -1px;
text-transform: capitalize;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: Open Sans;
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -webkit-moz-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.reload:hover{
background: #317af2;
}
.btn {
width: 200px;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #317af2;
}
.btns {
float: left;
width: 100%;
margin: 50px auto;
}
.credit {
text-align: center;
color: #888;
padding: 10px 10px;
margin: 0 0 0 0;
background: #f5f5f5;
float: left;
width: 100%;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: black;
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background:#f5f5f5;
font-weight: bold;
font-size: 13px;
color: #888;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: #eee;
}
.page-container {
float: left;
width: 100%;
margin: 0 auto 300px;
position: relative;
}
.panorama {
width: 100%;
float: left;
margin-top: -5px;
height: 700px;
position: relative;
}
.panorama .credit {
background: rgba(0,0,0,0.2);
color: white;
font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
float: right;
}
</style>
<script>
$(document).ready(function(){
$(".panorama").panorama_viewer({
repeat: true
});
});
</script>
</head>
<body>
<div class="main">
<div class="header">
<h1>360度全景图插件jQuery Panorama Viewer</h1>
<h2>在你的网站上嵌入一个全景照片</h2>
</div>
<div class="panorama">
<img src="demo_photo.jpg"></div>
</div>
</body>
</html>
JS代码(jquery.panorama_viewer.min.js):
!function(e){
function n(e,t){
var n,r,i=t;
this.pause=function(){
window.clearTimeout(n);
i-=new Date-r}
;
this.resume=function(){
r=new Date;
n=window.setTimeout(e,i)}
;
this.resume()}
function r(e){
var t=e.changedTouches,n=t[0],r="";
switch(e.type){
case"touchstart":r="mousedown";
break;
case"touchmove":r="mousemove";
break;
case"touchend":r="mouseup";
break;
default:return}
var i=document.createEvent("MouseEvent");
var s=2;
if(navigator.userAgent.match(/Android/i)){
s=10}
i.initMouseEvent(r,true,true,window,1,n.screenX,n.screenY,n.clientX*s,n.clientY*s,false,false,false,false,0,null);
n.target.dispatchEvent(i)}
var t={
repeat:false,direction:"horizontal",animationTime:700,easing:"ease-out",overlay:true}
;
e.fn.panorama_viewer=function(n){
document.addEventListener("touchstart",r,true);
document.addEventListener("touchmove",r,true);
document.addEventListener("touchend",r,true);
document.addEventListener("touchcancel",r,true);
return this.each(function(){
var r=e.extend({
}
,t,n),i=e(this);
i.find("> img").load(function(){
function l(t){
var n={
x:false,y:false}
,i={
x:a.x-(u.x-t.clientX),y:a.y-(u.y-t.clientY)}
;
if(r.direction=="horizontal"){
if(r.repeat==true){
n.x=true}
else{
n.x=i.x<0&&i.x*-1<o.w}
if(f&&n.x){
a.x=i.x;
a.y=0}
}
else{
if(r.repeat==true){
n.y=true}
else{
n.y=i.y<0&&i.y*-1<o.h}
if(f&&n.y){
a.y=i.y;
a.x=0}
}
e(this).css("background-position",a.x+"px "+a.y+"px");
u.x=t.clientX;
u.y=t.clientY;
t.stopPropagation();
return false}
function c(t){
f=false;
n.unbind("mousemove",l);
if(t.type=="mousedown"){
u.x=t.clientX;
u.y=t.clientY;
f=true;
n.bind("mousemove",l)}
else{
e(document.body).focus()}
t.stopPropagation();
return false}
function h(){
a={
x:0,y:0}
;
e(this).css("backgroundPosition","0 0")}
i.find("> img").addClass("pv-pano");
i.addClass("pv-container").wrapInner("<div class='pv-inner pv-animating'></div>");
if(r.direction=="vertical"){
i.addClass("pv-vertical")}
i.find(".pv-animating").css({
"-webkit-transition":"all "+r.animationTime+"ms "+r.easing,"-moz-transition":"all "+r.animationTime+"ms "+r.easing,"-ms-transition":"all "+r.animationTime+"ms "+r.easing,transition:"all "+r.animationTime+"ms "+r.easing}
);
imgSrc=i.find(".pv-pano").attr("src");
width=i.find(".pv-pano").width();
height=i.find(".pv-pano").height();
var t="no-repeat";
if(r.repeat==true){
t="repeat"}
i.find(".pv-inner").css({
height:height,width:width,background:"url("+imgSrc+") "+t,"background-size":"cover"}
);
if(r.overlay==true){
e("<div class='pv-overlay'><i class='pvicon-overlay'></i></div>").appendTo(i.find(".pv-inner"));
i.find(".pv-inner").bind("mouseenter",function(){
e(this).find(".pv-overlay ").fadeOut("fast")}
).bind("mouseleave",function(){
e(this).find(".pv-overlay ").fadeIn("fast")}
)}
var n=i.find(".pv-inner"),s={
w:parseInt(n.parent().width()),h:parseInt(n.parent().height())}
,o={
w:width-s.w,h:height-s.h}
,u={
x:0,y:0}
,a={
x:0,y:0}
,f=false;
n.bind("mousedown mouseup mouseleave",c);
n.bind("dblclick",h);
i.find(".pv-pano").hide()}
)}
)}
}
(window.jQuery)
CSS代码(panorama_viewer.css):
.pv-container{overflow:hidden;white-space:nowrap;position:relative;}
.pv-inner.pv-animating{-webkit-transition:background-position 500ms ease-out;-moz-transition:background-position 500ms ease-out;-o-transition:background-position 500ms ease-out;transition:background-position 500ms ease-out;}
.pv-inner{display:inline-block;height:100%;width:auto;cursor:move;}
.pv-vertical .pv-inner{width:100%;}
.pv-inner .pv-pano{height:100%;width:auto;}
.pv-vertical .pv-inner .pv-pano{height:auto;width:100%;}
.pv-container .pv-overlay{width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0.2);}
.pv-container .pv-overlay i.pvicon-overlay{margin-top:-43px;top:50%;margin-left:-40px;position:absolute;left:50%;width:80px;height:87px;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABXCAYAAACTFMIVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RDhBRjE4Mzg2NDMxMUUzOEI3OTg1NzVCMjUzMzE0QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RDhBRjE4NDg2NDMxMUUzOEI3OTg1NzVCMjUzMzE0QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZEOEFGMTgxODY0MzExRTM4Qjc5ODU3NUIyNTMzMTRBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZEOEFGMTgyODY0MzExRTM4Qjc5ODU3NUIyNTMzMTRBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++haY+QAAD8FJREFUeNrkXXtU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);}
.pv-container.pv-vertical .pv-overlay i.pvicon-overlay{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABXCAYAAACTFMIVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RDhBRjE4Nzg2NDMxMUUzOEI3OTg1NzVCMjUzMzE0QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RDhBRjE4ODg2NDMxMUUzOEI3OTg1NzVCMjUzMzE0QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZEOEFGMTg1ODY0MzExRTM4Qjc5ODU3NUIyNTMzMTRBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZEOEFGMTg2ODY0MzExRTM4Qjc5ODU3NUIyNTMzMTRBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FSJ+/AAAC+1JREFUeNrkXQlQ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);}