闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌。连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。
项目背景: 这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播,预计访问量达到亿级,并发做到2000+/s,且有不少的容错预案,我这次主要负责前端首页方面的展示效果。
功能点:
文字无缝轮播(不要在意为什么在移动端还会有这样的需求)
当一说到文字无缝滚动时,大家最先想到的是marquee,但是已经好久没有接触这个标签了,w3c也不对其进行维护了,并且还有最后必须等到全部滚动完毕才会再次滚动,并且对于rem布局采用基于px的滚动体验会非常的 差等等。。
第二个想到的是采用类似jquery实现的图片轮播机制,可以基本完成,但是发现无论是jquery还是zepto文字在滚动的时候会抖动,可用性比较差。
再就是现在用到的css3 + 少量js,采用很少的代码就可以实现文字不同长度,文字条数不定的文字无缝滚动轮播。
下面先看html结构
1.这是第一条数据
2.这是第二条数据
3.这是第三条数据
4.这是第四条数据
5.这是第五条数据
1.这是第一条数据