服务过美国总统竞选的非传统投票UI【demo已放出】

===============================
更新:DEMO和分析已经放出,地址在这里 
 
=====================================
 
 
 
 
12年初,我参与了一个项目(在项目中主要负责实现下面说到的一个需求),这个项目针对美国国内用户,主要作用是投票。 这个项目会用于美国的一些民众评选,其中,包括奥巴马和罗姆尼竞选美国总统的民意调查和美国明星奖项评选。 US团队喜欢叫它faceoff,有对决的意思。
 
好吧,既然取名有点剑拔弩张,设计也会磨剑擦枪,设计稿大概是这个样子。(项目现在已经下线了,我按回忆做了一个简单的样子作为参考)
 
 
 
当时win8的metro风格出来有一阵子,类似的设计已不鲜见,一般是图上面一个overlay,overlay上面有些介绍文字,overlay一般是隐藏的(或显示一行标题),鼠标移到图片上时,overlay才从一个方向滑出来,显示在图片上面。
 
第一眼看到设计稿感觉没啥的,和win8 metro风格的图标差不多。可仔细一看,中间间隔是斜的……是斜的……
 
就这一个细节,会带来三个问题:
  • 图片必须是直角梯形
  • 图片上的文字内容,也要在直角梯形里排布
  • 鼠标的作用区域也是梯形,当鼠标悬停在梯形区域上时,overlay要出来
 
首先想到的一个办法是用canvas做,但和那边团队沟通后,他们说考虑到SEO还是要使用dom做,但允许在高级浏览器上图片是梯形,低级浏览器上图片是矩形。 
 
这种非常规前端需求对前端知识综合应用是个考验。经过一些尝试,我最终实现了这个需求。
 
因为这个项目已经下线,没法给大家链接。不过我准备写个简单的DEMO给大家参考下,晚点完成后放出来。
 
不过在DEMO出来之前,大家可以先把它当成个前端试题,拿来练下手,经常试下非常规前端需求实现,对自己的技术提升有帮助。
 
 
更新:DEMO已经放出,地址在这里 
 
 
本文是博主Arfei Zhang原创,欢迎转载。转载请注明转自博客园,并附上本文链接http://www.cnblogs.com/arfeizhang/p/faceoff.html,谢谢!
posted @ 2014-06-30 00:29  Arfei Zhang  阅读(3691)  评论(14编辑  收藏  举报