服务过美国总统竞选的非传统投票UI

时间：2014-07-01 00:09:23 阅读：336 评论：0 收藏：0 [点我收藏+]

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

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

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

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

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

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

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

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

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

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

原文地址：http://www.cnblogs.com/arfeizhang/p/faceoff.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行