背景

做一个活动页面，转盘抽奖，九宫格，点击转转，还有一个向上的无限轮播。emmm看到这个的需求的时候我没想太多直接做了。然后就是一顿写静态页面，后来发现就有点不会写了，就问同事找代码，成为一个copy 工程师了

九宫格抽奖跑马灯效果

这事我在乐享上面看到同事用原生的写的，代码copy，改了改就用了，效果真不错，学起来成本也很低

实现原理

1. 九宫格的布局

2. 转到哪一个元素，就在当前元素添加一个类.active 的类（即高亮

3. 写一个转的函数，设定一个中奖的格子，设定转几圈，然后写一个定时器，定时器转的速度先快后慢，最后停下

emmm，说思路好像很简单，但是实现起来就不容易了

看我同事实现的九宫格转盘

定时器是一个亮点，感谢他，哈哈

中奖信息的无限轮播

这个就和轮播一样的，一直向上滚动。我当时在网上找了大多数都是复制两份相同的节点。后来我又问我同事，是不是有更好的实现方式，他说只能这样。然后他给了我一个思路，确实比网上好很多，代码少，纯css

实现思路

1. 复制两份一样的数据

2. 父元素向上移动，往上移动50%的时候停止，这时候刚好展示完第一份数据

3. 重复2的步骤

向上无限滚动

总结

写以前没有写过的东西，还是很不错的，能够学习到新的东西