网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级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">«</a>
<a href="#" class="right">»</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"
});
});
转载请注明来源:jQuery图像360度全景查看器特效代码
本文永久链接地址:https://www.moyouyouw.cn/code/642.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论