?

先來一張圖片：

?

?

功能描述：

　　定時更新數據并且點擊按鈕可更新數據；

　　用動畫銜接新舊數據切換過程；

　　當前動畫未執行完，不允許操作點擊更新數據；

　　鼠標移到圖片顯示當前圖片的詳細信息，并且跟隨鼠標移動；

?

技術實現方案：

　　為了優化，第一屏圖片使用html直接寫入，此后的更新才使用jsonp獲取數據渲染成html。

　　因為鼠標移到圖片上需要顯示主播的大圖以及主播的詳細信息，所以本來只需在js渲染成html的時候使用一個數組記錄每個主播的信息，鼠標移到小圖需要展示圖片信息的時候只需獲取當前小圖在原先集合中的索引位置，然后從數組中取出對應的元素即可。

?

?

但是考慮到第一屏是php直接用html寫入的，獲取不到第一屏主播的信息，所以與php達成一致意見：在每個主播的標簽上自定義一個屬性記錄當前的信息，然后直接獲取字符串轉換成對象使用。

?

?

?

開發過程遇到的bug：

　　想起都淚奔~~o(>_<)o ~~ ：那些年遇到的bug 之一：多次綁定事件

?

PS：雖然項目還沒上線，但還是歡迎來我秀欣賞美女主播喔 (*^__^*) ：?http://www.woxiu.com/

?

轉載于:https://www.cnblogs.com/Travel/p/4463798.html

總結

以上是生活随笔為你收集整理的重构项目之一：大图展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。