使用jquery写一个热键(J/K)动态滚动浏览插件
来源:互联网 发布:义乌淘宝培训学校排名 编辑:程序博客网 时间:2024/06/15 08:30
加班之余很无聊,几分钟足够写个彩蛋夹在里面自娱自乐。。。
实现的效果很简单,用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写一个热键(J/K)动态滚动浏览插件
- 自己写一个jQuery垂直滚动条插件(panel)
- jquery写的左右滚动插件
- jquery 写个滚动自动加载插件
- 怎么写一个有关相册的横向滚动浏览模式
- jquery无缝插件liMarquee动态滚动
- 如何写一个jquery 插件
- 怎么写一个jquery插件
- 一个文字无缝滚动的jQuery插件
- Jquery 图片浏览插件
- 动态treeTable jquery插件使用
- 用Jquery写的一个分页插件
- 写了一个jQuery滑动条插件
- 写了一个jQuery弹性导航插件
- 写了一个jQuery图片轮转插件
- 如何写一个简单的jquery插件
- 如何写一个Jquery 的Plugin插件
- 从无到有写一个jQuery开源插件
- Google Code项目Git版本控制
- 让我吐槽会
- (vim+ctags+taglist +cscope):(ubuntu 10.10下安装Ctags与TAGLISTS插件)
- 用Intent启动Activity,并在Activity之间传递数据
- WinDiff 使用
- 使用jquery写一个热键(J/K)动态滚动浏览插件
- GDB简单调试方法
- java继承中的几点注意事项
- sugarCRM安装
- Source Insight: UTF-8格式编码无乱码输入
- android Notification 的使用
- ExtJs消息框
- 信号与槽
- 自定义android控件,柱状图统计