页面滚动事件的使用 在现在更加追求页面加载速度和用户体验的情况下，页面的滚动事件使用的越来越多。通常我们使用滚动事件主要做的事情主要有： ajax异步加载，加快页面首次加载的速度 懒加载（或延迟加载）：先把HTML元素放到textarea标签中，或把img的链接先放到一个字段里，页面滚动到某个位置时才进行开始加载 顶部导航或侧边导航的焦点跟踪 侧边数字导航的跟踪（例如百度经验） “回到顶部”功能 在这个demo中我们能够看到上面列出的几乎所有的事件：查看样例本项目中用滚动事件实现了：懒加载，顶部导航焦点追踪，侧边数字导航和“回到顶部”功能，不过demo中没有实现异步加载的功能，其实懒加载和异步加载的原理差不多，只不过一个是先把数据请求了只是不加载，一个是滚动到位置了才用ajax请求数据。 1. 顶部导航的焦点追踪 # 焦点的追踪，顾名思义：当我们移动到哪个区域时，焦点就移动到哪个导航元素上，指示我们当前查看的是哪个区域。当然，这个功能的前提是我们需要知道每个元素距内容顶部的高度。// 获取每个item距顶部的高度,$item为区域的综合，listTop用来存储每个区域距顶部的高度 $item.each(function(index, el) { listTop.push($(el).offset().top); }); 我们从demo中也能看到，当aaaa区域到达顶部时，导航的position变成fixed，然后开始跟踪；滚动条向上滑动，aaaa离开顶部时，导航重新变回原来的样式。其实，这只是我们看到是这个样子，导航的样式切换来切换去。但实际上我们并不是这样实现的，实际中这是两个导航（O(∩_∩)O~），只不过让其中一个导航（称为A）不动，另一个导航（称为B）显示隐藏而已，导航B填充导航A的内容即可。在获取了这些item距顶部的高度后，那么我们就在滚动事件中判断，滚动条的高度是否超过了第一个item的高度，如果超过导航B显示即可，否则导航B隐藏（代码中.navfix即导航B，winTop为滚动条的高度）。// 是否显示顶部导航 winTop < listTop[0] ? $(".navfix").hide() : $(".navfix").show(); 现在重点来了，导航B显示出来了，那么就需要当前所在的区域和焦点对应上：刚才我们已经获取到每个区域的高度了，现在我们就计算一下滚动条的高度在哪个区间（编号K），计算出区间后，我们就可以给哪个导航元素相应的样式了： winTop=listTop[0] && winTop=listTop[1] && winTop=listTop[2] && winTop=listTop[3] : 在区域dddd // 检测所在区域 for (; i < t; i++) { if ( winTop > listTop[t-1] ) { k = t-1; break; }else if ( winTop>=listTop[i-1] && winTop < listTop[i] ) { k = i-1; break; } } // 顶部导航效果 if( k > -1 ){ $li.removeClass('hover'); $li.eq(k).addClass('hover'); } k默认的是-1，即不在任何区域，若k>-1即肯定处在某个区域内，先清除导航中所有元素的样式，然后再指定样式 2. 侧边数字导航 # 其实侧边数字导航与顶部导航实现的原理一样：数字侧边栏也是有两个（跟着区域移动的数字导航A，固定导航B），当某个数字跟着区域移动时，导航B中相应的数字隐藏；当数字到达顶部时，导航A中的数字隐藏，导航B中的数字显示；即使区域的数字到达顶部不再移动，那也不能立即变成灰色，应当还是绿色，只有该区域超过窗口上边框才能变成蓝色。这就形成了我们现在看到的效果。这里的重点是计算出什么时候隐藏导航A中的数字，显示导航B中的数字，而且导航B的数字显示什么颜色：每次滚动时，都首先让导航A中的数字显示，导航B的数字隐藏，然后计算每个区域所在的位置，如果某个区域距顶部的高度与滚动条的高度小于了导航B的数字的高度，就说明导航A中的数字该隐藏，导航B的数字该显示了；那显示的数字呈现什么颜色呢，刚才我们计算出了当前所在区域的编号K，那么区域编号小于编号K都是已经看过的，就显示灰色，否则就是正在看或者没看的区域就显示绿色。// 侧边数字导航 $item.find(".item-icon").show(); // 跟着区域移动的数字 $step_a.css('visibility', 'hidden');// 固定导航的数字 for(i=0; i

特色的自我介绍 我们程序员哪能用老俗的方式介绍自己呢，用一种特别的方式，让别人对我们能够眼前一亮。当然，这种方式很久之前就已经存在了，只是自己尝试的比较晚而已。var wenzi = { name : '蚊子', age : 24, school : 'NUC(中北大学)', email : 'xxx@gmail.com', description : 'love front-end, love life', key_skills : { javascript : function(){ console.log('javascript', 'jQuery', 'nodejs', 'seajs'); }, html_css : function(){ console.log('canvas', 'storage', 'css3', 'html5', '兼容性', '语义化'); }, php : function(){ console.log('CI', 'curl'); }, other : function(){ console.log('acm', 'algorithm', 'git', 'mercurial', 'github', 'linux'); } } } 上面的这种方式，既体现了前端开发程序员的特色，也能表现出一个人掌握的技能。不过，这种方式，也只有技术人员能看懂，我们首先要做的就是通过招聘人事这一关。

再见2014，你好2015 一年过得真快，转眼间 2014 就要接近尾声了，平时倒没什么感觉，等到总结这一年的时候才发现“哈，2014 就这么过去了，我在这一年里究竟都做了些什么”。其实回想这一年，发现自己做得真的不够，对自己有些松散，有很多的事情都没有做，再去后悔也没什么用，只希望自己能在 2015 年做的更好。其实年终总结也是在入驻了博客园才开始的，这之前还从来没有做过总结呢，下面的两个分别是 2012 年末和 2013 年末的总结，而这次的是 2014 年末的总结： 2012 年末总结【 2013 年的希冀 】 2013 年末总结【 2014 的希冀 】 在为 2014 年制定的目标里，其实只是实现了小小的一部分，很多都还没有实现。不过还是要总结下 2014 这一年都做过了哪些事情，还留下了哪些遗憾： 4 月底时去广州出差，第一次坐上了飞机，第一次越过了秦岭淮河，有点小兴奋（O(∩_∩)O~）； 5,6 月份时成功崴脚，现在冬天有时候还感觉稍微有点不舒服； 去郑州出差整整半个月，一个人一直在跟公司总部协调各个方面的工作，这个工程中确实学到了很多的东西； 和同学一起去了圆明园，颐和园和国家图书馆； 开始在 github 上正式更新代码了，会简单地使用 git 版本控制工具了； 中秋节（9 月 3 日）开始报名学习驾照，并在 12 月 22 日正式成为马路杀手家族的一员； 9 月底时打算辞职，国庆后跟经理提示辞职想法，于 10 月 24 日正式离职，并在 10 月 27 日投入到新的工作； 真正的开始在工作中学习版本控制工具 mercurial 的使用，开始初步了解分布式版本控制工具的使用；以前都是直接从 SVN 上直接 down 下项目的代码，改好了就提交，自己新建文件夹来进行版本控制，若是改坏了，则直接删除，重新 down 下一份； 入手了《Javascript 高级程序设计（第 3 版）》，《只是为了好玩》（Linus 自传），《乔布斯传》，后两本是最近刚入手的，还没怎么读呢，嘿嘿； 我们总是通过每次小小的成功来激励着我们的前进，可是 2014 年也是留下了些许的遗憾： 将要过去的 2014 年和之前一样，什么时候回家都一样； 自己买的书有些还是没有看完，买了就放在书架上总是不好的； 像 html5，css3，nodejs 等这些技术还是接触的比较少； 北京还是逛的比较少，有时候周末就是懒得出去； 。。。。 发现这篇文章里全是一条一条的，好吧，就这样写吧。在将要到来的 2015 年里，我还是希望能够完成一些目标吧，让自己在接下来的时间里更充实一些： 完善一下 github 静态博客的各种功能，比如评论和分页的功能，再添加一个时间轴功能等等； 熟悉 Markdown 的语法，并能熟练地使用 Markdown 编写文章； 熟练使用 git 和 hg 版本控制工具（【廖雪峰博客】）； 看完《只是为了好玩》（Linus 自传），《乔布斯传》； 熟悉 jQuery 各个版本之间的改动与改动的原理，并抽时间学习其源码； 每天要向 github 提交代码，至少每周一篇博文，每月一次总结性的文章（其实一年也就 12 篇总结）； 真的要学习下新的技术，不然跟不上呀，html5, css3,seajs, nodejs 等技术； 浏览一下北京的名声：长城，故宫，欢乐谷，三里屯，798，八大胡同，海底世界等等； 愿平平安安、快快乐乐过完整个 2014。 定的目标真的不高，只要用心的是完成，总是能实现的。本命年马上就要结束了，在此大声的说一句：“再见 2014，你好 2015”。

Javascript中的定时器 使用setTimeout()和setInterval()创建的定时器可以很多的功能，比如在一定时间后执行代码，实现秒级或者毫秒级的倒计时，等等。可是我们需要知道的是Javascript是 单线程运行的，每次都会从执行队列中取出将要执行的代码开始执行；而定时器仅仅是将我们将要运行的代码加入到执行队列中，至于什么时候执行，那就得看这个执行队列的前面有没有其他执行的代码了。 1. 高级定时器 # 定时器对队列的工作方式是：当我们设置的时间过去后，将代码插入到执行队列注意，给队列添加代码并不意味着对它立即执行，而只能表示它会尽快执行。设定150ms后执行的定时器不代表到了150ms代码就立刻执行。它表示代码会在150ms后被加入到队列中。如果在这个时间点上队列中没有其他东西，那么这段代码就会被执行，表面看上去好像代码就在精确指定的时间点上执行了。其他情况下，代码可能明显地等待更长时间才执行。队列中所有的代码都要等到Javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的。hello world实际上，firefox中定时器的实现还能让你确定定时器过了多久才执行，这需要传递一个实际执行的时间与指定的间隔的差值。如：// 仅firefox中 setTimeout(function(diff){ if(diff>0){ // 晚调用 }else if(diff

CSS3中transition的使用 transition初体验 # 我们先来看一个实例热热身，狠狠点击这里多年来，web前端开发人员一直在寻求通过html和css实现一些动画效果，而不再使用Javascript或Flash。现在因为CSS3的出现让我们的愿望成为了现实，这就是CSS3中的transition属性。通过这个实例我们能够看到一个transition的简单的使用，鼠标放上去，链接变为红色，同时慢慢向右移动，鼠标离开后，链接再回到初始的状态。比我们之前的仅仅是颜色的变化好了很多，更有动感，给用户的体验更好。 transition的浏览器兼容性 # 因为transition是CSS3里才有的属性，所以你懂的，IE8及以下的IE浏览器均不支持，虽然IE9已经能够支持很多的CSS3属性了，可是transition还不支持。到目前为止，IE10+，firefox16+，chrome26+，Safari7+和opera15+等浏览器中可以支持transition的标准属性了，直接使用transition就可以了。不过在IE10(PP3)、firefox4.0~15.0、chrome4.0~20.0、Safari3.1~6.0和opera·0.5~12.0里，使用transition还需要添加各浏览器的私有属性：-webkit-transition, -moz-transition, -o-transition等。 transition中的属性 # transition里主要包括四个属性值： 过渡或CSS属性：可以是border, margin, padding, font, color, background，transform等 过渡需要的时间：以秒或毫秒为单位的数据，如1.0s, .4s(0.4s), 300ms等 指定的过渡函数：如linear, ease-in, ease-out等 过渡的延迟时间：以秒或毫秒为单位的数据，如1.0s, .4s(0.4s), 300ms等 以我们文章最开始的demo为例来进行讲解：a{ ransition: transform .4s linear; } a:hover{ transform: translateX(10px); } transition 过渡属性 过渡时间 指定的过渡函数 过渡延迟时间 样例中 transform(过渡) .4s(即0.4s) linear(匀速过渡) 无 在上面的css代码里，a标签有一个transition过渡效果，然后我们还给出了过渡的最终效果：translateX(10px)，即向右偏移10px。这个过渡效果是由a标签的hover效果触发的，经历0.4s，a标签的偏移量由0匀速的变为10px，离开后再匀速的回到0px. transition更多的效果 # 很多时候我们不只是改变一个css效果，还想要改变更多的css属性效果。我们有两种方式可以使用：1.transition能够同时声明多个属性过渡，如：.transition{ transition:background 2s linear, border 1.2s ease-in; } 2.分开书写：.transition{ transition-property: background, border; transition-duration: 2s, 1.2s; transition-timing-function: linear, ease-in; } 当然，这些过渡效果需要我们主动的来触发它们，否则它们自己是不会动的，比如我们使用hover，active，click等等。当然，对于CSS3的transition还有很多的东西需要我们去挖掘！