这种流行的文章更新2016年9月1日,以反映图像全景插件的当前状态。
让您的游客在欣赏360度通过整合这些很酷的jQuery的全景图像显示的插件查看网站的图像 。 可能的用途包括虚拟旅游,全景观众/滚动,图片立方体,无尽的照片滑动条和更多。 请享用!
相关文章:
1. Threesixtyslider
Threesixtyslider是用于创建使用jQuery 360倍的图像的插件。 那些使用这个插件会很高兴地发现,它在所有主要的浏览器都支持(IE6 +含),并且也充分响应!
此,与SpriteSpin库一起都提供类似的功能,通过它用户可以充分旋转图像。 在电子商务网站上显示图像时,其中一个完整的360度的视角是对用户有利的,这是特别有效的。
对于配置,360slider提供的选择,从少数height和width ,以playSpeed和disableSpin ,允许用户制作一个完全自定义的体验。
2.摊铺机
下一步我们的名单上是摊铺机,一个jQuery插件创建,使全景的宽屏图像更容易获得。 特里门,摊铺机的创造者,从iPhone 4升级到iPhone 6是由手机拍摄全景图像的能力交口称赞。
虽然他与全景图像迷恋,门变得沮丧,在看到这些图像显示在iPhone上的倾斜方式。 有什么好处全景照片,如果不能炫耀呢?
为了确保影像正确呈现,摊铺机专注于跨设备提供兼容的纵横比例,这样的宽屏和全景图像将呈现为他们应该。
事实上,摊铺机做这样一个好工作是新闻网站的边缘上的插件依赖于显示美国第一夫人米歇尔·奥巴马的宽屏幕影像约她掌握社会化媒体的文章 。
3. jQuery的球面全景浏览器
jQuery的球面全景视图是两个库从工作室开放实验室第一。 jQuery的球形全景允许用户显示的图像的完全360度视图,使得该插件大炫耀餐馆,公寓等
使用这个插件是非常简单的,因为它甚至不需要任何JavaScript编写。 所有你需要做的是类的添加panorama到您想要应用效果的任何图像。 值得注意的是,这一点很重要.panorama类是保留给这个库。
如果你想定制这个插件,你必须完全使用新的班级名称,如img或panoramaImage 。 从那里,你可以指定与生成的视图图像的视图列列(的意见每一行号)的数量,以及。
4. jQuery的虚拟之旅
jQuery的虚拟之旅库是上述插件的扩展,它依赖于前述的库函数。 这就是说,这个插件通过提供用户创建互动性,虚拟旅游的能力需要它一步。 要执行此,库利用<map>和<area> HTML标记来互动坐标添加到页面。 通过依靠这些HTML元素,可以为旅游团在浏览器中呈现,其中JavaScript是关闭状态!
当观看了这个插件的例子,我们可以看到,它创建了一个类似的效果,以谷歌街景。 它使我们能够点击的照片,并导航到该点的坐标的特定点,让我们从我们刚刚点击的部分观看图像。
5. SpriteSpin
SpriteSpin是一个jQuery插件,从图像的目录或缝合的精灵片创建动画。 一旦动画创建它将然后通过这些逐帧,像翻书循环。
这个插件的目的是提供任何种类的产品,类似360滑块360度的视角。 SpriteSpin需要它提供的附加功能,所有这些都允许用户自定义动画的行为和表现一把了一步。
6.帕诺
帕诺是一个用于创建全景图像的可靠,简单的库。 它的代码库unminified包含小于250线,采用的Pano嵌入图像的极轻量的资源制造。 用更少的代码来较少的功能,所以它应该是毫不奇怪,全景图只提供了三个选项: img, interval , speed 。
7.全景360°jQuery插件
接下来是全景360 jQuery插件英寸开发作为另一插件的叉,全景360库的创建者是用滚动效果不悦和重点创建这个库,以从图像的一个滑动顺畅地移动的能力到下一个。
该插件可以很容易地创建一个网页,一个惊人的部分,以及为包括整个无关的网页,但像下面的演示链接全景。
8. jQuery的影像立方体
下一步我们的名单上是jQuery的图像立方体库,从这个名单上剩下的一个插件是独一无二的。 正如它的名字所暗示的,它允许用户显示图像在一个立方体状的方式。
更重要的是,还有更重要的是可以用很少的代码行很容易地定制了十几个选项。 在这些选项是beforeRotate和afterRotate这两者都是回调函数,并提供该库为开发者提供的控制的一个例子。 此外,用户可以修改多维数据集的方向,速度,宽松,而真正自定义图像立方体是通过一些的显示方式的选项 。
9.回旋加速器
回旋加速器得到它从它的显示全景图像旋转的从一边到另一边的能力命名。 当使用回旋加速器,我们可以单击并拖动鼠标到一个方向,然后看着在该方向上的图像转动。 鼠标,或手指拖拽的速度设定旋转速度; 初始阻力之后,回旋会旋转,虽然图像连续,同时保持整个速度相同。
回旋加速器提供了类似的选项dampingFactor和autorotation配置回旋的旋转行为,你可以阅读更多有关在这里 。
10. jQuery的简易全景浏览器
我们的名单上的最后一个插件是一个简单的全景浏览器。 像回旋加速器,用户可以通过移动图像用这个插件可以显示,但它并非意在显示连续旋转图像。
取而代之的是,观众将滚动要么取决于插件的滚动速度的左边或右边(或上下)。 默认情况下,该插件将执行ease-in动画将滚动无论从右侧到的速度离开了700ms 。 要改变这种情况,用户可以自定义值的传递animationTime和easing的选择。 要了解更多关于此库的选项,检查这里 。
最后的想法
希望现在,你已经了解了一些新的jQuery插件,用于创建全景图像。 你知道的任何我没有提到? 随意下面自己的名字发表评论,除了有任何问题,你可能有!
From: https://www.sitepoint.com//10-jquery-panorama-image-display-plugins/