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. 中國作文網說道:

    關注了!
    很不錯的效果!

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 澳洲幸运5开奖直播 抽搐翻白眼的av女 手机麻将作弊器有用吗 江苏十一选五玩法介 京香julia封面 重庆幸运农场开奖 麻生希无码迅雷下种子 12126期足彩即时比分 活塞vs火箭直播 安徽25选5 全民麻将作弊器下载 601390股票行情 幸运3D-首页 南昌麻将游戏免费 南粤36选7开奖结果今晚 麻将玩法图解