加班之余很无聊,几分钟足够写个彩蛋夹在里面自娱自乐。。。
实现的效果很简单,用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);
}
});
分享到:
相关推荐
jquery多款滚动条插件插件
jQuery倒计时/计时器/时间插件,用jQuery做一个时间插件,可以倒计时,计时,效果运行见晓,希望你采纳
JQuery滚动广告插件 JQuery 滚动 插件
jQuery全屏滚动插件
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 Marquee 标签,但比 Marquee 更强大。它可以应用于任何 Web 元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、...
jquery上下滚动插件 控制li上下滚动 ie789 firefox 测试通过
jquery滚动广告插件,效果不错,兼容不同的浏览器,这点很好。
jQuery滚动效果插件 Waypoints ,Waypoints 是一个 jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,...
jQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航滚动插件jquery.navjQuery页面定位导航...
jQuery产品选择轮播图左右滚动特效插件,使用jquery.SuperSlide.js
jCarousel图片滚动插件 jquery图片滚动 jCarousel 是个非常好看又好用的内容滚动切换插件,可以实现按序水平或垂直方向的内容列表的切换。 滚动切换的内容可以是静态的HTML内容,也可以是JS的对象列表,也可以是...
jQuery滚动图片延迟加载插件【一个大神写的】
jquery自定义滚动条插件 1.兼容ie8+ 的自定义滚动条 2.滚动条样式完全自定义 3.单页面多次调用
jQuery实现模拟滚动条插件版
基于jQuery的图片左右无缝滚动插件
UI JQuery自定义滚动条插件是 jquery自定义滚动条的UI JQuery插件。 UI JQuery自定义滚动条插件演示图: 点击查看演示:
jQuery横向和纵向内容滚动插件Sly
jquery.mCustomScrollbar自定义滚动条插件,包含官方源码,源码中包含DEMO,包含简单本地DEMO,即拿即用
jQuery插件创建一个侧面部分的菜单,允许你滚动到页面上的不同部分。要求浏览器ie8以上版本