jQuery图像360度全景查看器特效代码

演示  website 下载

这是一款轻量级360度全景图像查看器jQuery插件，支持触摸，鼠标拖动、触摸滑动和左/右箭头控制。

使用方法：

1.在Html页面中引入jQuery库和jQuery pano插件。

<script src="jquery.min.js"></script>
<script src="jquery.pano.js"></script>

2.创建Html全景图像查看器控件。

<div id="myPano" class="pano">
  <div class="controls">
    <a href="#" class="left">&laquo;</a>
    <a href="#" class="right">&raquo;</a> 
  </div>
</div>

3.设置插件CSS样式。

.pano {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  cursor: move;
}
.pano .controls {
  position: relative;
  top: 40%;
}
.pano .controls a {
  position: absolute;
  display: inline-block;
  text-decoration: none;
  color: #eee;
  font-size: 3em;
  width: 20px;
  height: 20px;
}
.pano .controls a.left { left: 10px; }
.pano .controls a.right { right: 10px; }
.pano.moving .controls a {
  opacity: 0.4;
  color: #eee;
}

4.调用刚刚创建的容器上的插件，并使用“img”选项嵌入360度全景图像。

$(document).ready(function(){
   $("#myPano").pano({
    img:"1.jpg"
   });
});

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。