摘要： 跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活... 阅读全文

摘要： 今天要克隆的前端特效非常有意思，可以参见GitHub404页面https://github.com/vajoy/master/index.html记得之前华为在站酷发布EMUI设计大赛的主页也用了这种特效。说简单点，就是鼠标在页面移动时，banner上的图片呈现有层次的空间轴动特效，效果图如下：咱们... 阅读全文

摘要： 周老虎落网的时候，网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网（网易http://news.163.com/special/data_zyk/ ，腾讯http://news.qq.com/zt2014/zykgxw/index.htm），查看这俩页面，都是通过H5中canvas强大的绘图... 阅读全文

摘要： 今天要扒的是腾讯网站地图页面（http://www.qq.com/map/）页卡滚动效果，见下图有兴趣的童鞋可以去那页面试一试，其动画效果见下图：那么先理下思路：上方的按钮对应下方的某个栏目，点击某按钮时，其对应的栏目（暂且称为A吧）滚到最上方，原本在A前方的栏目则在滚动结束后自动跳到最后面（这里要... 阅读全文

摘要： 昨晚想仿造下音悦台首页“返回顶部”的小超人效果，觉得这东西的实现很简单，应该不会费时超过一个钟。结果撸代码的过程发现存在很多意想不到的问题。先发个图：有兴趣的朋友可以去音悦台点一下这个小超人图标试一试，默认是隐藏的，滚动条下拉一小段距离后会从下面飞上来悬停在右下角，点击的时候不但浏览器滚动条会返回顶... 阅读全文

摘要： 京东首页的楼层图标默认是灰色的，但拉动滚动条，让该图标从下方挪动到屏幕正中的时候，该图标会显示出从上到下由灰变绿的动画效果，如下图这种效果很有Lazyload的范，也是挺吸引眼球的交互方式，下面用JQ来仿造下这种效果的实现方式，其实挺简单。首先我是做了2个gif分别作为图标的默认状态和动画状态（注意... 阅读全文

摘要： 前端日子工作太忙没时间发随笔，现在来总结一些前端开发中的特殊规范（常规的规范就不赘述了），希望能让各位收益，也欢迎提出异议。一. 文件系统一个有条理的文件系统可以为后期的维护提供便利，起码寻找某个页面的某张图片时不用对着url地址顺藤摸瓜找半天，如果能做到不看url也能准确猜中某页面文件的所在地，那... 阅读全文

摘要： 自昨天发了各浏览器内核介绍的随笔，就闲不住了，想直接写个JS来识别用户所用浏览器版本。写着写着却发现很多坑爹的地方，比如IE10-的版本是依循常规支持attachEvent，但到了IE11，却只支持addEventListener而不再支持attachEvent。光是这一点就可以判断IE是个大坑，I... 阅读全文

摘要： 所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”，直译这个词汇叫做“渲染引擎”，不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容，将页面内容和排版代码转换为用户所见的视图。注：有时候我们所说的“浏览器内核”甚至“渲... 阅读全文

摘要： 当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素设置水平居... 阅读全文

摘要： 上面的例子看似简单，但结果并不好了解，很容易把人们给想绕了——“a.x不是指向对象a了么？为啥log(a.x)是undefined?”、“b.x不是应该跟a.x是一样的么？为啥log出来居然有2个对象”当然各位可以先自行理解一下，若能看出其中的原因和工作机理自然就无须继续往下看啦。下面来分析下这段简... 阅读全文

摘要： 今天扒皮下京东商品展示区的一个特效：大家可以自行去京东看下特效，下面是这个特效的动态图（这次聪明的我懂得给图加水印了）理下思路，每个分类选项卡宽度一致，且有一条灰色底边，然后默认有一条红色的色标让它漂浮在首个选项卡上面（其中的小三角形可以自己做个图），默认首个选项卡的文本（像上图是“AAA”）为红色... 阅读全文

摘要： 知乎首页有个交互还蛮有意思，当用户在左侧头像区选择某个头像的时候，右侧内容区域会依据鼠标在头像所留经的时间来决定是否显示所停留头像的对应内容：今天简单说下用JQ完成这个交互的思路。先照例写下HTML/CSS，整俩div分别作为头像元素和内容区域元素： 这里是头像 这里是内容区域接下来是JQ部分： 1 function changetext(){ 2 $(".neirong").text('hahaha'); 3 } 4 5 $(function(){ 6 $(".touxiang").hover(function(){ 7 timeout 阅读全文

摘要： 这几天一直在给一家电商搞前端开发，首页做DIV页面重构的时候自然地做到每个电商平台都会有的部分——产品分类菜单栏，如下图截的是淘宝的效果：其实实现鼠标移到左侧主分类（我们暂且称之为A部分）便显示出右侧详细分类部分（称之为B部分）的功能并不困难，但这里不得不说主流的电商平台在这个地方都有个很好的用户体... 阅读全文

摘要： 写在前面：本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析、细化、修改而写出来的，在这边感谢那些慷慨提供科普文档的技术大拿们。 要查阅JQ的源文件请下载开发版的JQ.js文档，下载地址：http://jquery.com/download/ 注意选择其中的development版 阅读全文

摘要： 刚刚接到一个面试电话，对头的先生问我懂不懂触发器和存储过程，当时是觉得有些好笑，毕竟“视图、触发和存储”是咱数据库工程师的吉祥三宝，怎么可能不认识？只是稍后他还问了下游标这东西，仔细想想我是不常使用Cursor，因为大表用上游标来遍历会降低查询效率，一般都是推荐面向集合的方式来解决问题而非遍历。不过... 阅读全文

摘要： 世界上最遥远的距离，不外乎我在搞前端，你却在用旧IE，现在随着XP要退休了，IE6的市场占有率应该也会逐步下滑。不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动，做网站的朋友依旧不能忽视IE6的存在。 现在谈的是解决IE6下png图片透明度不显示的问题，这招是淘宝的伎俩，貌似12年双十一活动页面代 阅读全文

摘要： stay hungry, stay foolish VaJoy / 蓝邦珏 Addr：Shenzhen E-Mail：vajoy@qq.com 站内：http://space.cnblogs.com/msg/send/vajoy QQ：25112391 Twitter：https://twitter 阅读全文