该热门文章已于2016年9月1日更新,以反映图像全景插件的当前状态。
通过集成这些很酷的jQuery Panorama图片显示插件,您的访问者可以欣赏您网站图片的360度视图 。 可能的用途包括虚拟游览,全景查看器/滚动,图像立方体,无尽照片滑块等。 请享用!
相关文章:
1. Threesixtyslider
Threesixtyslider是一个用于使用jQuery创建360度图像的插件。 使用该插件的用户将很高兴发现所有主流浏览器(包括IE6 +)都支持该插件,并且响应速度也非常快!
这与SpriteSpin库一起提供了相似的功能,用户可以通过这些功能完全旋转图像。 在电子商务网站上显示完整360度视图对用户有利的图像时,这特别有效。
对于配置,360slider提供了从height
和width
到playSpeed
和disableSpin
的少数选项,使用户能够制作出完全自定义的体验。
2.摊铺机
我们列表的下一个是Paver,这是一个jQuery插件,旨在使全景和宽屏图像更易于访问。 Paver的创建者Terry Mun从iPhone 4升级到iPhone 6,并被手机捕获全景图像的能力所震撼。
尽管他对全景图像十分着迷,但Mun还是对看到这些图像在iPhone上显示的歪斜方式感到沮丧。 如果无法展示全景照片,那有什么好处?
为了确保图像正确渲染,Paver致力于在设备之间提供兼容的宽高比,以便宽屏和全景图像能够按需渲染。
实际上,Paver做得很好,新闻网站The Verge依靠该插件显示了美国第一夫人米歇尔·奥巴马(Michele Obama)的宽屏图像,这是一篇有关她掌握社交媒体的文章 。
3. jQuery Spherical Panorama Viewer
jQuery Spherical Panorama View是Open Studio Labs的两个库中的第一个。 jQuery球形全景图允许用户显示图像的完全360度视图,从而使该插件非常适合展示餐厅,公寓等。
使用此插件非常简单,因为它甚至不需要编写任何JavaScript。 您所要做的就是将panorama
类添加到要应用效果的任何图像上。 请务必注意, .panorama
类是为此库保留的。
如果要自定义此插件,则必须一起使用新的类名,例如img
或panoramaImage
。 在这里,您可以指定生成的视图数,以及图像的视图列列(每行的视图数)。
4. jQuery虚拟之旅
jQuery Virtual Tour库是上述插件的扩展,它依靠上述库来起作用。 也就是说,此插件通过为用户提供创建交互式虚拟游览的功能,将其进一步向前发展。 为此,该库利用<map>
和<area>
HTML标记向页面添加交互式坐标。 通过依赖这些HTML元素,可以在关闭JavaScript的浏览器中呈现游览!
在查看此插件的示例时,我们看到它会产生与Google Maps Street View类似的效果。 它允许我们单击照片中的特定点并导航到该点的坐标,以便我们从刚刚单击的部分中查看图像。
5. SpriteSpin
SpriteSpin是一个jQuery插件,可从图像目录或缝合的Sprite-sheet创建动画。 创建动画后,它将像翻书一样逐帧循环播放。
该插件的目的是提供任何产品的360度视图,类似于360滑块。 SpriteSpin通过提供一些其他功能进一步迈出了一步,所有这些功能都允许用户自定义动画的行为和表示。
6.帕诺
Pano是用于创建全景图像的可靠,直接的库。 它的最小化代码库包含少于250行,因此使用Pano可以非常轻巧地嵌入图像。 更少的代码带来更少的功能,因此pano仅提供三个选项也就不足为奇了: img,
interval
和speed
。
7. Panorama 360°jQuery插件
接下来是Panorama 360 jQuery插件。作为另一个插件的分支而开发,Panorama 360库的创建者对滚动效果不满意,并创建该库的重点是能够平滑地从图像的一张幻灯片上移动到下一个。
该插件可以轻松创建网页的惊人部分,以及整个页面,除了下面的演示链接之类的全景图之外,什么都不包含。
8. jQuery Image Cube
我们列表的下一个是jQuery图像多维数据集库,这是该列表中其余部分唯一的插件。 顾名思义,它允许用户以立方体形式显示图像。
更好的是,可以用最少的代码行轻松地自定义许多选项。 在这些选项中, beforeRotate
和afterRotate
都是回调函数,并提供此库为开发人员提供的控件的示例。 此外,用户可以通过多个选项修改立方体的方向,速度,缓动效果,并真正自定义图像立方体的显示方式 。
9.回旋加速器
回旋加速器因能够显示左右旋转的全景图像而得名。 使用回旋加速器时,我们可以单击鼠标并将其拖动到一个方向,然后观察图像在该方向上的旋转。 鼠标或手指拖动的速度设置旋转速度; 初始拖动后,回旋加速器将连续旋转图像,同时始终保持相同的速度。
回旋加速器提供了类似的选项dampingFactor
和autorotation
配置回旋的旋转行为,你可以阅读更多有关在这里 。
10. jQuery Simple Panorama Viewer
我们列表上的最后一个插件是Simple Panorama Viewer。 像Cyclotron一样,用户可以在使用此插件显示的图像之间移动,但是它并非旨在显示连续旋转的图像。
相反,查看者将根据插件的滚动速度向左或向右(或向上和向下)滚动。 默认情况下,该插件将执行ease-in
动画, ease-in
动画将以700ms
的速度从右向左滚动。 要更改此设置,用户可以将自定义值传递给animationTime
和easing
选项。 要了解有关该库选项的更多信息,请点击此处 。
jQuery Simple Panorama Viewer主页
jQuery Simple Panorama Viewer演示
最后的想法
希望到目前为止,您已经了解了一些用于创建全景图像的新jQuery插件。 您知道我没有提到的任何事情吗? 除了您可能遇到的任何问题外,还可以在下面用他们的名字发表评论!
From: https://www.sitepoint.com/10-jquery-panorama-image-display-plugins/