WebH5 使用 panolens.js 实现360全景地图

2023-04-09 16:12:01JavaScript010

WebH5 使用 panolens.js 实现360全景地图,第1张

panolens.js 是一款很强大的全景图片查看器，也可播放视频，详情可查看官网

最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的文档和demo 。

大概分为两种模式，模块化引用和普通html引用，如下图：

本文章主要分享一下普通html引入，举个栗子：

哇哦竟然实现了，小伙伴们赶快试试吧~~~ 记得点赞哦~~~

<dl>

<dd>

</dd>

</dl>

</div>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

</div>

<style>

.nav_left{background: #232b35height: 100%width: 220pxmin-height: 600pxposition: fixedtop: 100pxleft: 0}

.nav_leftlist{}

.nav_leftlist h2{height: 50pxline-height: 50pxpadding-left: 40pxfont-size: 16pxbackground: #3b444fcolor: #999999position: relativecursor: pointer}

.nav_leftlist h2 b{position: absolutetop: 20pxleft: 13pxwidth: 16pxheight: 9pxbackground: url(../images/icon04.png) no-repeatbackground-position: 0 0cursor: pointer}

.nav_leftlist h2 b.cur{background-position: -16px 0}

.nav_leftlist dl{}

.nav_leftlist dl dt{height: 50pxline-height: 50pxbackground: #2c3643font-size: 16pxcolor: #ffffffpadding-left: 60pxposition: relativecursor: pointer}

.nav_leftlist dl dt b{position: absolutetop: 20pxleft: 34pxwidth: 16pxheight: 9pxbackground: url(../images/icon04.png) no-repeatbackground-position: 0 -10px}

.nav_leftlist dl dt b.cur{background-position: -16px -10px}

.nav_leftlist dl dd{}

.nav_leftlist dl dd a{display: blockheight: 50pxline-height: 50pxcolor: #fffpadding-left: 80pxfont-size: 16pxposition: relative}

.nav_leftlist dl dd a.cur{color: #ee581c}

.nav_leftlist dl dd a.cur b{display: blockposition: absolutetop: 16pxright: -1pxwidth: 11pxheight: 18pxbackground: url(../images/icon04.png) no-repeatbackground-position: 0 -20px}

</style>

</body>

$(function(){

$('.nav_leftlist').on('click', 'h2', function(event) {

$(this).siblings('dl').toggle()

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur')

}else{

$(this).find('b').removeClass('cur')

}

})

$('.nav_leftlist').on('click', 'dl dt', function(event) {