整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
016年7月中旬：
——這陣子淘寶H5很火，朋友圈被刷了好幾天屏。這不是一般的720度全景，它有偽3D的VR效果！你能上下、左右滑動看到不同視角的畫面，還能玩重力感應。對了那些動漫人物，動起來是分前后的！聽說淘寶請外包團隊，花了30萬。
——哦？以后不用了。
▲淘寶H5原版
2個禮拜后：
7月28日上午，iH5.cn主頁悄悄更新系統消息：“全景功能上線，可制作720VR瀏覽效果”。一下放出3個全景組件，720度VR、重力感應、頁面交互，各種功能1個不落！（在此感謝原作者Shrek公開了核心源碼）
你是說我們不花一分錢能做出淘寶的H5？
這是真的，我已經把這個H5做出來了：
▲淘寶H5致敬版
相似度：95%
你也要玩玩嗎？過程簡單得可怕，只有3步——
（1）準備全景素材
▲淘寶H5的圖片
A、1張首尾相連的全景圖，當背景；
B、堆疊在全景圖上的人或物件的PNG圖，當前景。
為方便演示，這里直接扒淘寶造物節80張切好的圖，拼合成不同的層。上面半透明的背景是20張切片合成的，前景大概照著淘寶H5的位置放，共分成3層（NO.1最靠前）。
（2）用Photoshop切圖
A、把不同層的圖片各豎切成N份，然后導出；
B、導出時，越靠后層的圖片寬度（W）要越大。
不會切圖勞煩百度，我這里把1張背景、3張前景分別切20塊導出為PNG。切的份數越多，三維效果就越平滑，但圖片也會隨著變大容易卡。
（3）用iH5做全景運動
▲用iH5設置交互
A、新建全景容器，下面放4個全景背景組；
B、把切好的分層切片分別拖到對應的全景背景組里。
比如你要放背景層圖片，就保持全景背景組1選中，把20張切片拖到頁面里就行。見證奇跡的時刻到了！以下幾張圖比較高能，是拖好圖調試的效果，強烈建議有WIFI的人點開：
▲用iH5分別調試水平轉角、垂直仰角、觀察點大小的效果
看完上面圖片你應該也懂了，每個全景組就是把切片按順序圍成圓柱。
那剛才給前后層圖片設不一樣的寬度，用處是？寬度越小，圍成圓的周長就越小，當觀察點在圓的中心，就會感覺這一層離得越近、移動得越快——VR的立體效果就這么來的。
[注]半徑=周長/2π，相減可推測不同層的間距，并判斷觀察點的合適位置。
如果你對點擊彈出華晨宇的新歌介紹、H5上方飄著一個造物節LOGO、滑動頁面畫面會伸縮什么的感興趣，直接去官網找教學視頻吧。
加全景和調試其實很快，30分鐘不到，主要時間都花在處理淘寶那些素材了……扒人家原圖重新拼合構圖再切開很費事啊，還是原創好。
因為模仿出來的H5太像了，為避免侵權不敢發出來給大家看。你自己試試吧？
.HTML 介紹
是網頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網頁的意思。我們如果想創建一個網頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言，是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。
1.html 的介紹
頁面整體分為兩部分：
一部分是head部分，主要是頁面的整體信息和配置，內容不會出現在瀏覽器內部。
一部分是body部分，這部分內容則會在瀏覽器中展示出來
我們使用 pycharm 創建一個 html ，打開后就是下圖模樣。
（1）文檔類型聲明（默認的可以不用設置）
<!DOCTYPE html>（2）開始標簽和結束標簽
一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
開始標簽：
<html lang="en">其中的 html 為根元素，是所有元素的基礎。lang 表示語言，en 表示英文。
結束標簽：
</html>（3）頭部標簽
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>其中 utf-8 表示字符編碼格式，如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。
（4）身體標簽
<body>
</body>身體標簽是文檔的主題，可視化區域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當于我們打開網頁時所看到內容。
（5）標簽的特點
標簽是由一對尖括號包裹單詞構成的，標簽要使用小寫。 一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
二.標簽
標簽分為塊級標簽和內聯標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）
1.內容的書寫
（1）塊級標簽（p）
兩個 p 中間可隨意書寫內容
<p>故事和酒，淘寶都有</p>（2）內聯標簽（span）
<span>故事和酒，淘寶都有</span>完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>運行后：
運行后看不出塊級標簽和內聯標簽的區別，所有我們使用檢查。右擊后點擊檢查
在點擊下圖中左上角的方框箭頭，變成藍色說明正在運行，之后就可以查看有關的數據了
無需點擊，只要將箭頭放在文字上就會出現相關內容
上面兩圖可以明顯看出兩句話的寬度不相同。
塊級標簽：在不設置寬度的情況下，寬度始終和瀏覽器寬度保持一致。
內聯標簽：寬度和內容有關
2.設置高度寬度
<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>
<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>
如圖所示，只有塊級標簽寬高改變了，內聯標簽不改變。由此可得，塊級標簽設置寬高有效，內聯標簽設置寬高無效。
3.多個標簽同時存在
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>
多個塊級標簽同時存在的情況下，排列方式從上往下
多個內聯標簽同時存在的情況下，排列方式從左往右
4.是否包含
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
<span>故事和酒，淘寶都有22</span>
</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22
<p>故事和酒，淘寶都有</p>
</span>
</body>
由此可知，塊級標簽可以包含內聯標簽，但內聯標簽不可以包含塊級標簽，只可以包含內聯標簽。
5.塊級標簽與內聯標簽相互轉換
（1）塊級轉內聯
<body>
<!--將塊級標簽轉化成內聯標簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>
</body>
（2）內聯轉塊級（display: block）
內聯轉為塊級之后，具有了塊級的性質。
<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>
（3）內聯塊元素（display: inline-block）
內聯塊元素包含了內聯標簽和塊級標簽的部分特性。
<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>
（4）段落標簽（p）
<!--段落標簽-->
<p></p>（5）標題標簽（h）
7. 頁面 社會化 分享功能
8. 富文本編輯器
9. 日歷
10. 綜合效果搜索平臺
11. 前端工程化
12. 輪播圖
- [無縫切換](http://www.swipejs.com/)
- [滑屏效果](http://www.idangero.us/swiper/)
- [全屏fullpage](https://github.com/peunzhang/fullpage)
- [單個圖片切換](https://github.com/qiqiboy/touchslider)
- [單個全屏切換](https://github.com/peunzhang/slip.js)
- [百度的切換庫](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)
- [單個全屏切換](https://github.com/peunzhang/iSlider)
- [滑屏效果](https://github.com/saw/touch-interfaces)
- [旋轉拖動設置](http://baijs.com/tinycircleslider/)
- [類似于swipe切換](http://touchslider.com/)
- [支持多種形式的觸摸滑動](http://www.swiper.com.cn/demo/index.html)
- [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)
- [大話主席pc移動圖片輪換](http://www.superslide2.com/)
- [滑屏效果](https://github.com/hahnzhu/parallax.js)
- [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)
- [ - 定寬網頁設計下，固定寬度布局開發WebApp并實現多終端下WebApp布局自適應](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html][WebApp)
- [判斷微信客戶端的那些坑](http://loo2k.com/blog/detecting-wechat-client/)
- [可以通過javascript直接調用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)
- [JiaThis 分享到微信代碼](http://www.jiathis.com/help/html/weixin-share-code)
- [聊聊移動端跨平臺開發的各種技術](http://fex.baidu.com/blog/2015/05/cross-mobile/)
- [前端自動化測試](http://www.zhihu.com/question/29922082)
- [多種輪換圖片](http://ajccom.github.io/niceslider/)
- [滑動側邊欄](https://mango.github.io/slideout/)
13. 文件上傳
14. 模擬select
15. 取色插件
16. 城市聯動
17. 剪貼板
18. 簡繁轉換
19. 表格 Grid
20. 在線演示
21. 播放器
22. 粒子動畫
九. Nodejs
十. 性能優化
- [Javascript高性能動畫與頁面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)
- [移動H5前端性能優化指南](http://isux.tencent.com/h5-performance.html)
- [5173首頁前端性能優化實踐](http://ued.5173.com/?p=1731)
- [給網頁設計師和前端開發者看的前端性能優化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
- [復雜應用的 CSS 性能分析和優化建議](http://www.orzpoint.com/profiling-css-and-optimization-notes/)
- [張鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
- [前端性能監控總結](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
- [ 網站性能優化之CSS無圖片技術](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)
- [web前端性能優化進階路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)
- [前端技術：網站性能優化之CSS無圖片技術](http://my.eoe.cn/tuwandou/archive/4544.html)
- [瀏覽器的加載與頁面性能優化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)
- [頁面加載中的圖片性能優化](http://www.w3ctech.com/p/1503)
- [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
- [html優化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
- [99css——性能](http://www.99css.com/tag/%e6%80%a7%e8%83%bd)
- [Yslow——性能優化](http://www.yslow.net/category.php?cid=20)
- [YSLOW中文介紹](http://www.cnblogs.com/yslow/)
- [轉一篇Yahoo關于網站性能優化的文章，兼談本站要做的優化](http://www.360ito.com/article/40.html)
- [Yahoo!團隊實踐分享：網站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
- [網站性能優化指南：什么使我們的網站變慢？](http://blog.jiasule.com/i/153)
- [網站性能優化實踐，減少加載時間，提高用戶體驗](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
- [淺談網站性能優化 前端篇](http://www.umtry.com/archives/747.html)
- [前端重構實踐之如何對網站性能優化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)
- [前端性能優化：使用媒體查詢加載指定大小的背景圖片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
- [網站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
- [加載，不只是少一點點](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
- [前端性能的測試與優化](http://mzhou.me/article/95310/)
- [分享網頁加載速度優化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
- [頁面加載中的圖片性能優化](http://www.f2es.com/images-bytes-opt/)
- [web前端優化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
- [網站性能優化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html)
- [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)
- [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)
- [由12306談談網站前端性能和后端性能優化](http://coolshell.cn/articles/6470.html)
- [AlloyTeam——前端優化](http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
- [毫秒必爭，前端網頁性能最佳實踐](http://www.cnblogs.com/developersupport/p/3248695.html)
- [網站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
- [前端工程與性能優化（上）：靜態資源版本更新與緩存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
- [前端工程與性能優化（下）：靜態資源管理與模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
- [HTTPS連接的前幾毫秒發生了什么](http://blog.jobbole.com/48369/)
- [Yslow](http://uicss.cn/yslow/#more-12319)
- [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
- [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
- [YUISlide,針對移動設備的動畫性能優化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)
- [Improving Site Performance](http://joelglovier.com/improving-site-performance/)
- [讓網站提速的最佳前端實踐](http://segmentfault.com/a/1190000000367899)
- [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)
- [Need for Speed – How to Improve your Website Performance](https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)
- [阿里無線前端性能優化指南 (Pt.1 加載期優化)](https://github.com/amfe/article/issues/1)
十一. 前端架構
十二. 個人作品
1. 推薦作品
2. 群員作品
3. 國外大牛精品
十三. 簡歷模板
十四. 面試題
十五. iconfont
十六. 開發工具類
十七. 前端導航網站
十八. 常用CDN
十九. Git,SVN,Github
這些技術如何學習，有沒有免費資料？
對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
