Question to say "I can!"

JavaScript实现360度全景图片展示效果

2012-12-21

作者:宇轩

360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现自由浏览,从而震撼的视觉效果。

全景照片:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接。现在的智能手机也基本带这个功能。

点此查看实例展示

这个小DEMO基于全景照片的左右边缘较为接近且适宜自动拼接与jser熟知的无缝滚动原理。下面这个图片就是本DEMO实现原理的简化图。

如果喜欢~

具体的代码看:宇轩的《JavaScript实现360度全景图片展示效果

 

附:宇轩对js的看法:

有人说:jQuery是毒药,会使人不思进取,放弃原生的JavaScript的学习。不过从我的经验看来,事实并不是这样,笔者正是由于 jQuery,才对JavaScript这门语言感兴趣,直至爱上JavaScript。兴趣是最好的老师。现在我时不时会想:这个程序利用jQuery 是这么实现,那么利用JavaScript怎么来实现呢。以前,我喜欢用jQuery去改写原生的JavaScript效果。现在,我更喜欢利用原生的 JavaScript来改写jQuery的程序。对我来说,借鉴jQuery的编程思路来编写其它JavaScript程序已经让我乐此不疲。

曾经有朋友问我为什么最终选择jQuery。说实话,这个也说不上为什么,也许是当初jQuery给我的第一印象非常好的原因吧。它非常容易上手, 它的大部分思想都是从HTML和CSS的结构中借鉴而来的,所以编程经验不多的设计师能够快速学会使用该库。记得那时候的我经常会在用jQuery做出的 某种动态效果后而高兴不已,常常惊叹于jQuery如此小巧,却有如此强大的功能。

在以前学习jQuery的时候,互联网并没有现在这么多资料,完全是靠自己看国外的网站的资料,每看完一个方法后,我都会做一点笔记,然后发布到 Blog(cssrain.cn)上,和网友们分享。时间一长,笔记的内容已经非常充足了。这本书的内容也就是从笔记衍生而来,相对于Blog的笔记,书 的内容更加系统。

 



作者:admin | Categories:设计问题 | Tags:

一条评论

  1. 中国作文网说道:

    关注了!
    很不错的效果!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量