你做過哪些較複雜的js交互效果？

12-29

或者最複雜的也行

（其實我想看看自己能不能實現出來）

首先提示一句...不要輕易嘗試富文本編輯器...

借著這個題目回憶起來還是很多感慨的...=_=。現在覺的自己還是愛這個行當的...恥度好高啊...希望題主能夠喜歡哈哈~

先上一發大三時候寫的主頁，現在還沒換過~

那時候的中二現在也難找了自己設計自己實現233

大二的時候仿過一個Google keep...基本上都實現了，其布局和動畫還算有點複雜...題主可以尋找一下，我蠻喜歡這個產品.

https://keep.google.com/

上了大三之後有點不安分，就隨便做了一些其他的東西...很遺憾由於各種原因沒有做完上線，只留了幾個靜態頁面...

http://wungcq.github.io/static/templates/index.html

這裡邊除了header裡面的素材以外其他都是CSS實現的...切圖需求也算有的了...右邊手寫的瀑布流和自己實現的滾動條...

同一個項目的個人主頁

http://wungcq.github.io/static/templates/user_center.html

這個頂欄主要是連續的毛玻璃背景拼接...就是小trick而已.

右邊的時間軸根據滑鼠滑動來動態放大縮小圓圈...很好玩很漂亮的效果...左邊的日曆沒什麼交互很但是能用到很多日期API...

然後是校長高升的時候隨意寫的一個歡送頁面...還蠻用心的哈哈

http://wungcq.github.io/static/templates/MrHuai.html

然後就是7月份剛畢業的時候，寫的一塊廣告目標受眾系統功能，做人群畫像TA濃度後驗的，就是拖拽啊還有很多校驗加上filter 排序自動檢查自動滾動展現，以及同一套代碼實現的添加修改、複製、預覽編輯、復原數據結構這些工作，react和redux實現的，加上報表和列表交互大概是2000多行吧…寫了得有半個多月...還為了靈活的tooltip寫了1500行的tooltip組件...

大概長這個樣子...因為數據量會大...所以做相關的優化也花了一些時間...主要還是內在邏輯多一點，本身不算特別複雜...

...標籤也會有過期的，查看的時候還要把過期的標籤值標出來...

不過是做的第三方廣告監測，使用門檻稍微高了點...腦補一下就好了=_=。

不過講道理，交互複雜很多時候並不是指類似於webIDE這種複雜，而是邏輯實在串聯得太多，IO也很多，加上做web app需要能夠刷新頁面基本保持原有狀態，即性能向native看齊，還要保留基本原始的頁面單位的信息量，就會導致很多複雜度誕生...恩...

順便宣傳一下吧...

雖然是剛畢業的萌新，但是做這一系列項目也挺久了，現在旗下有幾個單頁應用...正在努力提高體驗ing...

U-ADplus-【友盟+】廣效監測

說實話，職業做jser之後，就沒什麼自由去實現自己的小設計了，所以...沒事自己瞎折騰還是挺好的~~

回答著問題，又重新激起了內心創造的小慾望....感謝題主~

雖然後面寫過非常多的 JS，但是印象最深的還是三年多前在大學做外包的時候，寫過的一個網頁的 header 部分 JS 特效。

站點：Unitarian Universalist Congregation at Shelter Rock

就是頭部這裡：

來回的切換等，這還不算難，更大的挑戰是做的響應式的處理，縮小屏幕附帶響應式功能，雖然 HTML、數據等保持一致，但是功能效果全變了。。。當時做出來真是一個比較大的挑戰，除了 JS 更多是 CSS 上的。。

做完這個項目的十幾個不同的頁面，感覺自己的切圖能力上了一個大台階。都要吐了。

一個 H5 的編輯器

功能邊界

頁面渲染, 切頁
選擇組件
組件拖動
組件縮放 (對角固定)
組件旋轉
單擊選中
雙擊編輯
組件設置
- 樣式 (基本 css 樣式)
- 動畫
- 觸發
右擊菜單
- 組件層級 ....
- 複製粘貼組件動畫
- 複製粘貼組件

歷史記錄
鍵盤事件
- 全選複製粘貼
- 回退撤銷刪除 ...
參考線
- 吸附
- 參考網格
多組件設置
- 組件對齊
- 複製粘貼
- 層級 ...
邊界檢測

還挺有意思的

GitHub - chemzqm/images-preview: Images preview component for web pages on touch device.

仿微信體驗的圖片預覽組件，寫了兩天才做好。。

https://github.com/chemzqm/swipe-it

仿 IOS 的左劃刪除組件，用了差不多一天

GitHub - chemzqm/sweet-sortable: Make the elements sortable with sweet animation of high performance

仿 IOS 的高性能拖拽排序組件，用了兩天，後續又調整了很多次

GitHub - chemzqm/viewstack: Lightweight view switch component with animation

仿 IOS 的頁面切換組件，用了一天，代碼實現很挫，基本廢棄了

GitHub - chemzqm/imagebox: view images gallery easily on desktop browser

一個桌面端的圖片預覽組件，用了一天，個人覺得還不錯，至少比用 jQuery 那些做的好，哈哈

GitHub - chemzqm/pull-to-refresh: A pull to refresh component support Android and IOS

下拉刷新組件，比較簡單

GitHub - chemzqm/dribbble-effects: Some effects implementation with design form dribbble

兩個 dribbble 效果，花了點時間

各種 loading 效果

不動請看大圖。

去年寫的一個動效，h5。右下角按鈕指尖的動效，小表情彈出的過程，愛心飛行的軌跡。都不是特別難的技術。題主有興趣可以試試看 :D。

寫畢業論文那會兒，大家都是草草了事一兩周做完項目。
我也想啊，所以就想著要簡單模擬一下QQ的面板和聊天窗口，於是做了一個有QQ細胞的在線聊天室。
本以為兩三周能搞定的，然而整整花了將近兩個月=_= 並且在除夕夜上線（現在沒錢被下了。。）

這個聊天室應該算有點複雜吧，踩了太多坑又成功爬出來。前端JS後端Node.js，曾無聊大概數了下，好像差不多有兩萬行JS代碼，搞了PC端又加上了響應式，最後還用Cordova封裝成了個APP

當年我是那麼地認真。。。然而好像導師並沒有上過我的小聊天室。。。衰。。

好了，我直接扔出一些圖片吧，現在http://Coding.net收費了，沒錢掛上去了=_=

基本上已經模擬出了QQ面板和QQ聊天窗口的幾個基本功能，有好友分組、討論組等，當然了，還有全局之中「在線聊天室」的群聊

啊不說了不說了，這項目我也不想再完善添加新功能了，就這樣子吧

想看代碼或自行本地運行聊天室的可以來看看~

GitHub - imwtr/chat-room-2016: Chat room, bases on Node.js DEV, using Cordova to build an APK.

強答一記秦長熙的簡歷右上角的小地圖花了不少心思，不過得用新一些的瀏覽器

在萌新時期找實習做的，當然現在也是萌新啦 ?（′???）?

但如果非要說最複雜的話，感覺公司的項目可以提一下, 用js讓你幾分鐘拖出一款屬於自己的App https://modao.cc

去年剛轉前端讓我寫一個當時仿淘寶的移動端上導航功能，當時看起來挺簡單（就是導航點擊一項，頁面滾動到位置，或者頁面跳轉，然後上導航橫向滾動的效果），一周寫的差不多，後來適配問題，滾動效果問題以及後續改版等等，整的痛不欲生。關鍵隊友們也並不能帶來太多幫助。後來跳槽後，以前的隊友告訴我，又改了好幾次，終於定型了。

我擦...

今年在這個公司，有個微信公眾號比較複雜的是個多級聯動，中間摻雜著模糊搜索的功能。本來寫了兩天弄完了。可是尼瑪需求方（並不是本公司產品經理）要修改，可以的...過幾天，要修改，可以的...過了兩個禮拜，要修改！靠，本來寫的兩個js文件代碼很簡潔工整，沒bug。這一而再再而三，整體結構都快被破壞了！沒辦法，改！

又過了一個月，要求在模糊搜索加一個切換類型搜索，行，開會定方案，通過。改完了過了兩天人家說：不行，不能這麼做，再給我換個...！我們項目經理在人家面前根本強硬不起來，沒辦法，改完後...相安無事又一個月。在一個午後我沉心寫代碼的時候，又被項目經理叫過去說，還得改，這次要怎麼怎麼改（其實就是把以前的功能改回來！！！）我他嗎火了，經理好說歹說把我勸過去改了，此時代碼已經面目全非，根本沒心思去優化什麼的。

我說這兩個交互功能其實不是多複雜，之所以花的時間多。開始那個有些學藝不精的問題，當然也有需求變更等。沒問題。第二個就純屬需求方煞筆了。裝逼的不得了，雖然我沒見過，但我聽過他給我們項目經理打電話。我要有機會接觸這種人，就不能慣著你裝逼。

1.firefox 上的google快捷操作插件：

1）打開firefox後，雙擊ctrl打開google，輸入框獲得焦點；

2）在搜索結果前加上數字序號；

3）按數字n，在新頁簽打開第n個結果，並調到這個新頁簽；

4）按ctrl+數字n，在新頁簽打開第n個搜索結果；

5）按ctrl+shift+數字n，在新頁簽打開前n個結果；

純js寫的，可以方便的擴展到baidu等任何其他類似的搜索引擎。

沒法演示，大概07年做的，早就不兼容新版了。

2.用友暢捷通web erp的大數據表格。

情況是這個表格（基本dom結構還是table）是基於ie6老特性htc的js封裝方式做的。功能強大但是到了300行時拖動都很慢。後來有個扯淡需求（大超市進貨單）需要支持百萬行數據，而且不想分頁或懶載入。

於是，table里就定死了23行，然後在旁邊畫個滾動條出來。然後綁定拖動事件根據拖動位置非同步載入數據。

當然不會這麼簡單，各種性能優化啊，前後多載入點數據要不要；各種交互有話啊，慢慢拖的過程中是不是也要更新下數據啊；各種繼續調優啊，內存里也放不下百萬數據啦，那如何管理內存呢。

當然不會就這麼簡單，基本數據獲取方式變了，那以前的介面也基本全都不能用了啊，全都得向前兼容啊啊啊啊。

恩，不會就這麼完的，這個表格是用買來的一個什麼smartgrid逐步改進來的，買的是混淆代碼版本。恩，2w多行核心js代碼都是混淆的，慢慢改。。。

最後拿了個用友集團年度創新獎。

沒法演示，不是公開產品，而且這麼久了應該有新方案了吧。

3.藝龍內部項目管理軟體的源碼管理控制項

用flotchat（Flot Examples）改的一個控制項，瀏覽器支持canvas就canvas繪製，ie老版本用vml繪製，可以實現：

1.默認時間範圍為今天前一個月到後一個月，可以通過下方拖動深色區域來改變呈現的時間範圍

2.上方會顯示時間範圍內的tag生成來源，分支開閉情況，merge記錄等

3.tag，branche皆可點擊直接跳轉去項目詳情頁，滑鼠移上去顯示簡介不記得做沒做了

沒法演示，內部工具，據說還在使用中。

4.藝龍內部管理系統的時間選擇控制項。

說實話我一直討厭pc上的時間控制項，而這次，我們需要選擇7，8個時間（項目中各個時間節點的設置）。其實還是用3一樣的flotchat控制項改的：

不畫交互簡單說下得了：

1.時間範圍選擇和3一樣

2.滑鼠在上面大矩形移動時會有滑鼠跟隨的tips顯示滑鼠所在的年月日，右鍵則出菜單，裡面幾個里程碑，點一個就表示你把這個日子設置為某個裡程碑。

3.滑鼠可以在上面的大矩形拖出一個時間區間來，滑鼠鬆開時出來菜單，裡面幾個開發過程段，點一個表示你把這個時間區間設置為這個開發過程。

沒法演示，內部工具，據說還在使用中。對不起都沒法演示。。。。請發揮想像力盡量往設計精良的角度走。。。。如果不幸碰到用過的朋友請不要拆台哈哈哈

富文本編輯器算么？

類似excel的多層樹狀表頭顯示，並且客戶要求還要可以進行動態的表頭篩選。。實際應用中表頭層數大於5層。。

市面上沒找到對應的輪子，只能自己做一個了。。

源碼地址：finira/autoHeader

演示地址：autoHeader用例列表

還有蠻多2.0要做的功能，現在懶了。。。沒動力做了。。。

https://homura.github.io/new-game-sweet-day/

慢的話得上梯子，有BGM

拿了個相對簡單的galgame的OP練手

你可以試試用js寫一個模擬alert的瀏覽器阻塞事件。。。。反正我覺得完全寫出來是不太可能的