小米：小米MIX 3 全面屏去哪了

2018-10-23 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

小米MIX 3 全面屏去哪了-查阅二维码

完整欣赏此案例大约需要1分31秒

案例：小米MIX 3 全面屏去哪了

出品：小米

亮点：

策划上，游戏的形式，找出“图中的全面屏隐藏在哪？”点击它。一共20关，点击每关的“全面屏”图案，自动进入下关；每关都有30秒时间，时间自动减少，点击错误，自动扣1秒，如果在指定的时间里，没有找到“全面屏”图案，游戏结束；最后给出打败其他玩家的百分比，百分比根据平均答题时间和过的关卡数总和评分。最后可以长按保存生成的PK海报。
设计上，波普风格，又绘画作品，也有真实的景物。
技术上，预设置20张img标签引入的图片，默认隐藏；不同的关卡，显示不同的图片；点击“全面屏”图案采用一个div标签，预设置好，每关的绝对定位位置。用户点击到“全面屏”图案div标签，进入下一关，20关共用一个“全面屏”图案div标签。
体验上，很容易激发挑战欲望，反复玩这支H5。小五玩这支H5过程中，想到了以前玩过的“找不同”小游戏，将画面反复看个遍，而后找到，你要找的那个小小的图案。反复体验H5后，就是完全记住了“全面屏”图案。

技术实现： jquery

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签