zoukankan      html  css  js  c++  java
  • 服务过美国总统竞选的非传统投票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,谢谢!
  • 相关阅读:
    关于不重启Tomcat自动加载改变的class文件
    Oracle数据库查询优化方案
    NavBarControl
    Spring Boot 热部署
    JSR303定义的校验类型
    C# JSON的序列化与反序列化
    常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
    什么是窗口句柄
    luffy前台配置
    luffy后台相关设置
  • 原文地址:https://www.cnblogs.com/arfeizhang/p/faceoff.html
Copyright © 2011-2022 走看看