源起

您现在浏览的这个博客是本人08年学习.Net时的开发的一套博客程序提供的服务，其中也避免不了在功能上的暴增暴减，直到成为现在您看到的这个摸样，至今本人仍然维护着这个线上版本，一般时隔3、4个月修改一下结构或替换模板风格，紧跟时代的步伐，有限的提高用户体验嘛，作为以堆码养家糊口的我维护的这个个人博客如果太奥特曼了，是要罚去打小怪兽的。
昨天夜晚，修改了分页的显示方式(也就是您现在看到的分页)，考虑到阅读本人博客的用户能够快捷、方便的使用文章翻页功能，于是今天花了10多分钟添加上了这个功能——“键盘控制文章翻页”。实现层面上是非常简单的，在细节问题上，希望能让您有启发式的思考。类似功能有比如豆瓣的相册，就提供支持方向键浏览照片。

实现方式

这个功能基于Jquery实现，原理也很简单，监控键盘事件触发，判断是您期望的按键操作，代码如下：
$(document).ready(function(){
    $(document).keydown(function(event){
        if(event.keyCode == 37){
            getprepost();
        }
        else if (event.keyCode == 39){
            getnextpost();
        }
    });
});
function getprepost()
{
    pageobj = $("#pra");
    if (pageobj.attr("href")!=undefined)
    {
        window.location.href=pageobj.attr("href");
    }
};
function getnextpost()
{
    pageobj = $("#pla");
    if (pageobj.attr("href")!=undefined)
    {
        window.location.href=pageobj.attr("href");
    }
};
额，很快可以完成了这个功能的Demo，但是，细心的读者一定发现了，上面的这段代码监控键盘事件绑定在“document”上的，也就是说，只要在页面任何地方按下向左或向右的方向键，就执行翻页功能，这显然提高了用户的误使用率。根据我们一般浏览网页时的习惯，当需要使用翻页功能时，用户所处的关心的焦点是凝聚在所看到的“文本信息”范围之内，而这一现象通过行为表现出来，也就是用户的鼠标位置，一般是靠近焦点。也就是说只有假设用户在阅读文章的场景下(根据核心内容的坐标与鼠标当前所在的坐标计算)，按下方向键向左或向右就执行翻页功能。以避免用户误执行翻页操作。因此有了修改过的版本：
var positionX=0;
var positionY=0;
$(document).ready(function(){
    $(document).mousemove(function(e){
        positionX=e.pageX;
        positionY=e.pageY;
    });
    $(document).keydown(function(event){
        top = $(".left").offset().top;
        bottom = top+$(".left").height();
        left = $(".left").offset().left;
        right = left+$(".left").width();
        if (positionX>=left && positionX<=right && positionY>=top && positionY<=bottom)
        {
            if(event.keyCode == 37){
                getprepost();
            }
            else if (event.keyCode == 39){
                getnextpost();
            }
         }
    });
});
相对第一版Demo，上面的代码只是做了鼠标的坐标限制，假设在那个范围，用户的焦点是在浏览博客(阅读文章)，因此可以使用键盘控制翻页功能。最后，您不妨在博客的首页体验一把该功能，如果发现了Bug或更好的想法记得告诉本人昂，不许独乐的昂！~_~