标签：
前几天本前端小虾切了一个炒鸡简单的页面：
对！你没有看错，这个界面除了第二部分鼠标滑过的特效和点击申请接入部分的弹框表单之外，其他部分毫无难度，就是这么一张页面……把本小虾大大的整了一遍，所以小虾和大牛之间的差距绝不仅是物种上的不同！
首先是制作时间的估计。这个页面并不是一个新鲜的页面，在之前多多少少切过几个异常相似的，比如下面那两个：
http://dev.360.cn/mod/mediaV/intro
http://dev.360.cn/mod/mdata/intro
是的，两个结合一下就可以切出来了，对于初学者可能需要一天，但是对于亲手切出以上两个页面的本小虾，预估的时间是6个小时，3个小时把页面混合起来改一改，2个小时把弹窗切出来~还有1个小时用来玩耍~仅仅是样式的修改，这已经预留了算是很多的时间的了！可是，我错了，仅仅把图片从psd中切出来，找到合适的大小，切成css sprite图就花了好一段时间（由于经验不足养成的强迫症，也特别特别不好治），好在规定的时间中把页面切出来了。但是弹框内容和样式都还没有，文案也还没有，这里，就已经犯错误了！在规定的时间里仅仅切出了框架替换文案和部分图片也是需要时间的，不仅如此，弹框内容涉及到交互，而且还是popbox的交互，惭愧的是这个框架我用的并不好，非常不熟。图案要现切，弹框内容要过来之后，为了保持一致，样式要现扒~而且，交互的部分还要跟后台联调！看出来了么，我从中午开始的工作，其实做到下午仅仅是把涉及到自己的任务做完了，后台的交互完全没做，也就是要拉着后台一起加班了，而他加班的意义就是等我做好！这是非常浪费时间且没有效率的做法！没有提前把所有的东西要过来也是非常不正确的！
所以，在刚刚拿到一个设计稿的时候，不要只是觉得表面上又多简单，之前自己怎么做过，可以去哪哪找源码，总会有你想象不到的不同的，而且，不要先挑大块的、简单的做，一定要先挑需要有配合的部分去做，这样有什么问题可以及时互相解决，不至于拖到最后，没法联调，也不知道哪里有问题，没法展开工作。还有，就是拿到一个任务之后一定要马上去做，千万不要拖延！
接着说说弹框部分。先看图：
就是这样一个相当简单的界面交互，样式可以扒，而它实实在在的虐了我一把，如此可见，基础是多么的重要！
1.对popbox使用非常不熟练，竟然不知道可以改title，竟然是被“陪”我加班的产品大帅哥提醒说可以改，好惭愧！
2.居然在一开始的时候用了form表单，使用submit的方式提交信息，这样提交之后弹框不见了，确定之后的alert（“已申请”）也出现不了了，也没办法判断是不是有空值了，经过大神的指点，原来submit的提交方式跳转页面的方式，意思就是说提交后页面就跳走了，不是当前页面了，这个时候根本不需要用submit。于是，我使用了第二种方法，把表单中的值取出来，然后以url的方式传到后台。
这个时候，问题又来了，如何判断空值，总不能嵌套javascript或者jquery吧，虽然不是特别严重的处女座强迫症，但是如此一大长串的代码，看着也是非常难受的，于是，大神告诉我，使用onOk可以在这里定义函数，写上判断句，然后再用ajax传到后台，于是，问题解决了；看着是挺快的哈~其实我是试了很多种方法才去问大神们的，毕竟伸手党什么的特别不喜欢呢。终于，这个部分完成了，中间什么纠结的细节不再赘述了~
第二部分的特效有着大大的坑
弹框的部分解决了，整个页面切的差不多了，终于可以上线了，可是有一个大大的坑在那里，还好发现填上了，在哪里？就是第二部分的特效，鼠标划入划出牵动下面图片展示的效果。
一开始，我用的是hover，特别特别简单，在手机上也可以自动的变成click事件，点击后出现，可是其实不是那样的。本身hover就有局限，鼠标从上面的图标滑过离开后，下面的图片就立刻消失，要是想继续看，鼠标就必须放在那一亩三分地不能挪走，用户体验很差。而且最重要的是，在手机上点击的时候跳过去，松开就跳走，除了第一个展示，其他的基本看不到，而移动端又是一个非常重要的传播方式，所以，接着改！
这里一开始，我使用了click函数，但是我很不专业啊，我给每个上面的小图片设置了id号，获取id之后使用了switch函数判断是哪个小图，然后显示下面的大图，代码异常多！
case "6":$this.parents(‘.gongnengli1 ‘).siblings().children().children().removeClass(‘color2hover color3hover color4hover color5hover color1hover‘);
zhanshi1.css(‘visibility‘,‘hidden‘);
$this.addClass(‘color6hover‘).children(‘div‘).css(‘visibility‘,‘visible‘);
zhanshi2.css(‘visibility‘,‘hidden‘);
就是这样，一个6种情况，这样不仅代码效率特别低，而且我使用的id和弹窗需要传到后面的id是一样的！这就说明会出问题！大神这个时候无语的笑了一下说，你可以给每个小图上添加一个类，然后变化之后的样式基于这个类选择，这样在click函数中只要控制添加或者删除类就可以了！意思就是说，在hover时添加 .hover这个类，然后下面的样式通过 .hover div, .hover span 这样选择，很简单有没有！于是代码就变成了：
$(‘.gongnengli‘).click(function(){
var $this = $(this);
$this.addClass(‘hover‘).siblings().removeClass(‘hover‘);
})
对！三行，把我的十几行代码浓缩到了三行！精品是不是！已经惊呆的我表示，大神就是大神，大神吃的是代码，吐得是优质代码！
虽然解决了这个问题，可是产品大帅哥的要求还没有满足，之后加上了mouseover这个函数，不再赘述。
解决了两大问题，不得不谈谈浏览器的支持问题。
仅仅就本页面遇到的问题简单讨论一下，首先是宽度，这个页面没有很好地适配宽度导致有的图片比较大，把宽度撑开，有的比较小，就正好的宽度，这里发现之后是修改好了，但是要说的是，在切图前一定要想清楚是不是会在移动端使用，那么宽度是不是要设成100%，图片是不是要注意大小，是不是要另外使用media query进行适配兼容。
接着吐个槽，微信浏览器和普通浏览器是不一样的，据说是qq x5内核，但是它应该调用的是手机系统浏览器内核，这就造成了我的note2 机器上样式各种不兼容，但是在别人的手机上就没有问题，所以这里一定要注意不同浏览器的适配问题，一定要多测几个手机。还有一个兼容适配叫做：-webkit-tap-highlight-color: transparent; 控制的是某些移动浏览器在点击时出现的蓝色高亮背景，所以浏览器的重置非常重要的。
最后要说的是，对于一款产品，不管是怎样的产品，每个参与者都是测试，自己是最好的测试，不要等发现问题了再去修改，一定要仔仔细细测每一个地方，就算是产品着急着发布了，发布之后也要不断的查找问题，这个过程并不是自找麻烦的过程，而是提高自己，让自己进步的过程！一定要对产品负责，对用户负责！
以上是自己作为一只初出茅庐的代码小虾的小小认识，感谢这些难题，让我不断的收获新的知识，只有不断的总结才能进步，才能变成大牛~
标签：
原文地址：http://www.cnblogs.com/zhangwenjiajessy/p/4333316.html
