加班之余很无聊,几分钟足够写个彩蛋夹在里面自娱自乐。。。
实现的效果很简单,用j/k键自动翻滚上一条/下一条动态信息,和twitter、微博、g+等等一样,乃懒人IB利器。
主要解决的问题就是判断当前显示在第几条之上,如此获得动态列表中一条的索引位置,从而得到之前或之后对应的scrollTop值。为此需要遍历当前动态列表的每个元素,对其和当前的窗口scrollTop值作对比,把刚好不大于该值的那条索引作为参考物来进行之后的计算。
基本的代码如下:
实现的效果很简单,用j/k键自动翻滚上一条/下一条动态信息,和twitter、微博、g+等等一样,乃懒人IB利器。
主要解决的问题就是判断当前显示在第几条之上,如此获得动态列表中一条的索引位置,从而得到之前或之后对应的scrollTop值。为此需要遍历当前动态列表的每个元素,对其和当前的窗口scrollTop值作对比,把刚好不大于该值的那条索引作为参考物来进行之后的计算。
基本的代码如下:
var eventNS='keydown.timelineHotkeys';
$(document).unbind(eventNS).bind(eventNS,function(e){
//wrapobj为动态列表外的包裹对象
var wrapobj=$('.timeline-feeds:visible').eq(0);
if(wrapobj.length>0){
var code = e.keyCode;
//feedItemList为每个动态列表对象
var feedItemList=wrapobj.find('.item');
if(code===74||code===75){
var scrollTop=$(window).scrollTop();
//这里的60像素是页面顶部到第一条动态之间的间隔距离
var feed2TopPx=60;
scrollTop+=feed2TopPx;
var curViewIndex=-1;
var curOfst=0;
feedItemList.each(function(i){
var ofst=$(this).offset().top;
if(ofst<scrollTop){
curViewIndex=i;
curOfst=ofst;
}
});
if(code === 74) { // 按下j键时的处理(down)
curViewIndex+=2;
curOfst=feedItemList.eq(curViewIndex).offset().top-feed2TopPx;
}else{ // 按下k键时的处理 (up)
if(curViewIndex!=-1){
curViewIndex=curViewIndex>0?curViewIndex:0;
curOfst=feedItemList.eq(curViewIndex).offset().top-feed2TopPx;
}
}
$('body,html').animate({ scrollTop: curOfst}, 100);
}
}else{
$(this).unbind(eventNS);
}
});