?

先來一張圖片：

?

?

功能描述：

　　定時更新數(shù)據(jù)并且點擊按鈕可更新數(shù)據(jù)；

　　用動畫銜接新舊數(shù)據(jù)切換過程；

　　當前動畫未執(zhí)行完，不允許操作點擊更新數(shù)據(jù)；

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

?

技術(shù)實現(xiàn)方案：

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

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

?

?

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

?

?

?

開發(fā)過程遇到的bug：

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

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/Travel/p/4463798.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。