Web老虎机

  注意：由于项目被委托于1080*1920的数码展屏上使用，所以PC用户请在浏览器开发者工具中将分辨率调到1080*1920以观察到完整效果。

项目描述:

  这是一款用于大厅数码展屏上的"老虎机",被上海XX商厦委托开发，目前已经上线。

项目启动:

  下载完成之后，直接运行html即可。

• index.html 抽奖页-老虎机Play页面
• admin.html 后台页-后台查看和修改数据页面

功能说明:

1. 前端用户通过点击“开始抽奖”按钮,老虎机转动,并于一定时间内恢复到 “三图同行”的中奖状态,并弹出对应奖品.
2. 后台系统中管理员可以看到抽奖日志、奖品的库存、出库量和概率,并可以修改奖品的权重.

责任描述:

1. 参与并讨论系统功能的设计方案.
2. 负责所有前端页面的编码.
3. 和设计师通过蓝湖平台进行设计上的交流.
4. 项目部署到云服务器中,并将域名加速服务接入到CDN.

技术要点：

1. 利用transition控制background-position-y实现老虎机垂直滚动.
2. 利用background: repeat-y实现循环滚动衔接.
3. 利用JQuery的$.ajax请求和接收后台数据.
4. 使用JQuery-jcMarquee插件实现奖品展示栏水平滚动.

演示

视频演示：https://827652549.github.io/139.MP4

效果图：