重构项目之一：大图展示

先来一张图片：

功能描述：

　　定时更新数据并且点击按钮可更新数据；

　　用动画衔接新旧数据切换过程；

　　当前动画未执行完，不允许操作点击更新数据；

　　鼠标移到图片显示当前图片的详细信息，并且跟随鼠标移动；

技术实现方案：

　　为了优化，第一屏图片使用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

重构项目之一：大图展示相关推荐

共享单车数据集_共享单车项目数据可视化展示
共享单车项目数据可视化展示 1. 数据收集 https://www.kaggle.com/c/bike-sharing-demand/data 1.1 数据说明及问题分析数据内容包括两年内的每小时租 ...
[读码时间] 跟随鼠标移动（大图展示）
说明:代码取自网络,css中注释为笔者学习时添加,js中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
SSR服务端渲染（nuxt重构项目）
SSR服务端渲染(nuxt重构项目) 目的:优化SEO,提高网站权重 ,页面静态化,强化搜索引擎,提高首屏渲染速度参考文档:https://zh.nuxtjs.org/guide/installat ...
SwiftUI iOS 精品完成项目之宠物展示与领养App MVVM（教程含源码）
实战需求 SwiftUI 精品完成项目之宠物展示与领养App 本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能自定义字体 import SwiftUIenum Sailec ...
go使用zap + lumberjack重构项目的日志系统
[工作随笔]重构项目的日志系统原先公司的go项目是采用之前一个大哥自己开发的一个log包,来实现各种日志的打印监控,对于和很多的场景支持和日志分割都做的不太好,所以在近期有空的时候对老的日志系统进行 ...
iCAN大赛520支创新项目向世界展示“中国智造”
成都2018年10月26日电 /美通社/ -- 10月18日-21日,2018年第十二届 iCAN 国际创新创业大赛中国总决赛在成都圆满举行,全国19个分赛区选拔出的450支大学生团队,及70支青少年 ...
【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
用 Flask 来写个轻博客 (17) — MV(C)_应用蓝图来重构项目
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表重构目录结构重构代码使用蓝图后的路由过程总结前文列表用 Fl ...
轨迹系列8——记某真实项目中轨迹展示查询效率优化方案一（初步设计）
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景准确说,该项目的迹展示涉及到两个方面,一个是轨迹查询展 ...

重构项目之一：大图展示

重构项目之一：大图展示相关推荐

最新文章

热门文章