TAT.Minren 小米 WIFI 预定页面是如何出声的?
In Web开发 on 2013年12月26日 by view: 7,959
5

小米又做了一个成功的营销。在首页上放了 7 个三色的小米随身 WIFI 图片,每个图片是一个琴键,各代表一个音节,按照提示可以弹出《铃儿响叮当》。然后就出现了小米 WIFI 的预订页面。

这个页面估计又要在微博、微信中疯转了。小米的互联网营销技巧实在是无法望其项背。所以这里就谈谈技术实现吧。

琴键的实现很简单,一副大的 sprite 图,分别是原始状态和按下的状态。然后在 div 中设置 backgound position 就行了。

点击的时候更新一下 div 的 class 就可以换图了。

下面就是 spirit 图了,166k,还真不小。

 

声音用的是一个开源库,SoundManager http://schillmania.com/projects/soundmanager2/

看了一下这库的功能还比较强大,可以支持 Flash、HTML5 多种方式。压缩之后 11k。还有一个环形的播放器,使用 canvas 实现的。

11k 对手机可能有点大,估计如果只用 HTML5 的话应该可以再小点。这要研究一下。

 

 

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2013/12/how-millet-wifi-predetermined-page-aloud/

  1. 微伍网 2014 年 1 月 1 日

    音乐播放本来在 html5 里面 只是几句 js 语句!

    深圳司法局的 公众号(szftpf),里面的【普法微言】栏目里,播放页面,我就是用 js 播放的,那个播放页面还是很原始的用 css 一步一步画出来的!

    反而播放器的代码还多一点!

    如果,想用套件的话,网络上其实大把的!
    最简单就是用 微信网页版 的 jplayer 了!完全兼容任何浏览器,非常适合中国人使用!

    保辛哥(微信号:appisode)

  2. Dolly 2013 年 12 月 29 日

    这个页面点击动作用 js 来使, 为啥不利用 active 伪类来使呢?

    • TAT.Minren

      TAT.Minren 2013 年 12 月 30 日

      估计是点击的时候要控制声音播放,反正都要写 click 事件,不如把发声和换图都放在一起做。
      也有一种可能是开发同学不熟悉伪类。

  3. basecss 2013 年 12 月 26 日

    就错 -> 纠错

  4. basecss 2013 年 12 月 26 日

    就错,sprite

发表评论