为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery实现自定义滚动条

难度中级
时长 1小时 3分
学习人数
综合评分8.7
96人评价 查看评价
9.2 内容实用
8.3 简洁易懂
8.5 逻辑清晰
简介:通过本课程,让您掌握鼠标滚轮事件的细节,并能通过掌握细节实现自定义滚动条的效果。我们学完后也可以将鼠标滚轮事件封装成组件,通过封装的组件实现一个复杂的交互效果,深入理解滚轮事件的交互。

1章 介绍课程目标和学习内容

通过详细的细分教学,让学生掌握鼠标滚轮事件的细节,并能通过掌握的细节实现自定义滚动条的效果。并能将鼠标滚轮事件封装成组件。通过封装的组件实现一个复杂的交互效果,深入理解滚轮事件的交互
  1. 1-1 jQuery课程内容和目标 (03:12)

2章 案例HTML和CSS搭建

分析并完成示例的HTML结构,并同时完成标签区域和滚动区域的样式,实现案例整体外观。
  1. 2-1 讲解HTML结构 (05:07)
  2. 2-2 讲解标签区域样式 (07:02)
  3. 2-3 讲解流动区域样式 (04:04)

3章 实现案例交互

介绍自调用匿名函数,jQuery.extend方法的使用,实现可复用的JS代码组织结构。讲解拖动滑块内容滚动的思路,以及基本的事件绑定与解除,事件命令空间的使用,了解jQuery中outerHeight()与height()的区别,掌握实现标签切换时实现文章定位的思路。
  1. 3-1 jQuery交互代码组织方式 (08:47)
  2. 3-2 jQuery交互初始化操作的实现 (04:14)
  3. 3-3 拖动滑块内容滚动的思路 (07:22)
  4. 3-4 拖动滑块内容滚动的实现 (07:36)
  5. 3-5 鼠标滚轮控制文章滚动功能的实现 (03:49)
  6. 3-6 切换标签定文章功能的实现 (07:27)
  7. 3-7 滚动内容选中对应标签功能的实现 (02:48)

4章 总结课程

通过本课程,我们学习了鼠标的滚轮事件,以及如何封装成jQuery事件组件。结合实际的例子,我们实现了如何通过鼠标滚轮事件控制文本内容的滚动。
  1. 4-1 jQuery课程总结 (01:09)
课程须知
学习本课程,您要具备以下知识: 1.了解CSS和HTML 2.JavaScript基础知识 3.jQuery的基础使用
老师告诉你能学到什么?
1.自定义滚动条的组件 2.鼠标拖动事件的处理 3.鼠标滚轮事件的处理
意见反馈 常见问题 APP下载
官方微信
hv128