设为首页
收藏本站
切换到宽版
登录
立即注册
找回密码
搜索
搜索
本版
帖子
用户
快捷导航
论坛
BBS
VIP用户组
官网群
无名商城论坛
»
论坛
›
资源分享区
›
学习资源专区
›
【限定72小时】仿微博信息流JK快捷键滚动示例 ...
返回列表
发帖
查看:
258
|
回复:
0
[其他技术]
【限定72小时】仿微博信息流JK快捷键滚动示例
[复制链接]
无名
无名
当前离线
积分
32464
1万
主题
1万
帖子
3万
积分
管理员
积分
32464
发消息
发表于 2022-5-8 18:05:23
|
显示全部楼层
|
阅读模式
本教程转载网络,我只是个搬运工
Twitter、微博、Google Reader等网页版都有一套快捷键,J:快速查看上一条;K:快速查看下一条。
数据基于上一篇。增加当前项的样式:宽度为2的白色边框:
.current-comment { border: 2px solid #fff; }
那么我们需要在初始化数据后,将第一条数据设置当前项的样式:
同时,我们要注册键盘输入事件以便获取键入的是那个值,数值74为J、数值75为K:
jump函数即处理J、K快捷键,传入一个bool类型的参数,表示当前是键入的J还是K。 在jump函数中,我们用到一个jQuery插件,jQuery.scrollIntoView.js。jump函数中,我们获取当前项,如果键入的是J,判断下一条项不为空,则将当前项的样式去掉,下一项添加当前样式,同时将下一项滚动至顶部;键入K也类似。
程序运行效果如下图:
前项
,
键入
,
样式
,
快捷键
,
我们
相关帖子
•
服务器遭到DDOS攻击怎么办?
•
【FUT】AIDE第三课
•
【Max】团队~AIDE第五课
•
【FUT】AIDE第一课
•
【FUT】AIDE第二课
•
【Max】团队~利用AIDE做个小应用=总结+AIDE教程结束
•
【LUR】帅气炫迈在线教你如何搭建蔡徐坤打篮球网站
•
【解忧】深入理解Java反射
回复
使用道具
举报
返回列表
发帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表