JQuery Panorama Viewer 全景图片浏览插件

发布于 2020-05-07 20:07:19 字数 1566 浏览 1787 评论 0

jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片。要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer.js 和 panorama_viewer.css 到页面中,然后给图片添加 CSS 类 panorama。现代浏览器如 Chrome ,Firefox 和 Safari 以及在智能手机上都测试通过。

使用方法

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

<script src="jquery.min.js"></script>
<script src="jquery.panorama_viewer.js"></script>
<link href='panorama_viewer.css' rel='stylesheet' type='text/css'>

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

<div class="panorama">
 <img src="your-panorama.jpg">
 ...
</div>

可选参数

一定要改变图像的源图像和调用函数,如下所示:

$(".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               // 真/假 这个隐藏的初始指令覆盖
});

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

相关链接

Github地址:https://github.com/peachananr/panorama_viewer

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。