360全景html插件,jQuery 360度全景图插件 PANORAMA VIEWER

539c5cfdde9247a340d34fe466f7561e.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:PANORAMA VIEWER将帮助您把全景照片嵌入在网站上。使用鼠标拖拽方试查看效果。

基本用法

现在你可以用这个插件显示你的全景照片。因此,首先你必须将最新的jQuery库,jquery.panorama_viewer.js和panorama_viewer.css插入您的文档的

。现在你要做的这将图像添加到你的HTML像这样:

 

...

一定要改变图像的源图像和调用函数,如下所示:$(".panorama").panorama_viewer({

repeat: false,              //图像将重复当用户滚动到包围盒。默认值为false。

direction: "horizontal",    //让你定义的滚动方向。可接受的价值观是“水平”和“垂直”。默认值是水平

animationTime: 700,         //这允许你设置时间当图像被拖。设置为0以使其瞬间。默认值是700。

easing: "ease-out",

// 宽度选项 "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". 默认值”。 "ease-out".

overlay: true               // 真/假 这个隐藏的初始指令覆盖

});

现在你将能够显示你的全景照片,而不依赖于网站的整体宽度。我希望你会发现这很有用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果要使用 Photo Sphere Viewer 件加载没有后缀的片,你可以在加载片时,使用 `setPanorama()` 方法来指定片的路径,并使用 `setPanoramaType()` 方法来指定片类型。以下是一个示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Photo Sphere Viewer</title> <link rel="stylesheet" href="photo-sphere-viewer.min.css"> <style> #viewer { width: 800px; height: 600px; } </style> </head> <body> <div id="viewer"></div> <script src="photo-sphere-viewer.min.js"></script> <script> var viewer = new PhotoSphereViewer.Viewer({ container: 'viewer', panorama: '', defaultLong: Math.PI, defaultLat: 0, time_anim: false }); viewer.setPanorama('/path/to/image', null, {panorama_type: 'equirectangular'}); </script> </body> </html> ``` 在上面的示例中,我们首先引入了 Photo Sphere Viewer 的 CSS 和 JavaScript 文件。然后创建了一个名为 `viewer` 的 `<div>` 元素,用于显示全景。在 JavaScript 部分,我们创建了一个新的 `Viewer` 实例,并将其绑定到 `viewer` 容器上。然后,使用 `setPanorama()` 方法来指定片的路径为 `/path/to/image`,并通过 `{panorama_type: 'equirectangular'}` 参数来指定片类型为等距圆柱投影(equirectangular)。 请将示例中的文件路径和片路径替换为你自己的实际路径。注意,如果你的片没有后缀,需要确保片本身的格式是支持的,比如常见的 JPEG 或 PNG 格式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值