帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-04 网页特效 评论

这是一款轻量级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"
   });
});

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

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言