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

===============================

更新：DEMO和分析已经放出，地址在这里 

 http://www.cnblogs.com/arfeizhang/p/faceoffdemo.html

 

=====================================

 

 

 

 

12年初，我参与了一个项目（在项目中主要负责实现下面说到的一个需求），这个项目针对美国国内用户，主要作用是投票。 这个项目会用于美国的一些民众评选，其中，包括奥巴马和罗姆尼竞选美国总统的民意调查和美国明星奖项评选。 US团队喜欢叫它faceoff，有对决的意思。

 

好吧，既然取名有点剑拔弩张，设计也会磨剑擦枪，设计稿大概是这个样子。（项目现在已经下线了，我按回忆做了一个简单的样子作为参考）

 

 

 

当时win8的metro风格出来有一阵子，类似的设计已不鲜见，一般是图上面一个overlay,overlay上面有些介绍文字，overlay一般是隐藏的（或显示一行标题），鼠标移到图片上时，overlay才从一个方向滑出来，显示在图片上面。

 

第一眼看到设计稿感觉没啥的，和win8 metro风格的图标差不多。可仔细一看，中间间隔是斜的……是斜的……

 

就这一个细节，会带来三个问题：

• 图片必须是直角梯形
• 图片上的文字内容，也要在直角梯形里排布
• 鼠标的作用区域也是梯形，当鼠标悬停在梯形区域上时，overlay要出来

 

首先想到的一个办法是用canvas做，但和那边团队沟通后，他们说考虑到SEO还是要使用dom做，但允许在高级浏览器上图片是梯形，低级浏览器上图片是矩形。

 

这种非常规前端需求对前端知识综合应用是个考验。经过一些尝试，我最终实现了这个需求。

 

因为这个项目已经下线，没法给大家链接。不过我准备写个简单的DEMO给大家参考下，晚点完成后放出来。

 

不过在DEMO出来之前，大家可以先把它当成个前端试题，拿来练下手，经常试下非常规前端需求实现，对自己的技术提升有帮助。

 

 

更新：DEMO已经放出，地址在这里 

 http://www.cnblogs.com/arfeizhang/p/faceoffdemo.html

 

 

本文是博主Arfei Zhang原创，欢迎转载。转载请注明转自博客园，并附上本文链接http://www.cnblogs.com/arfeizhang/p/faceoff.html，谢谢！