博学谷 > 免费课 > Javascript实现页面动态效果

【前端】Javascript特效

Javascript实现页面动态效果

该课程详细全面的介绍DOM的基础知识,让您重新认识DOM,学会元素节点的类型判断、继承层次和分类以及DOM事件具体相关知识,DOM事件的使用方法及应用。为了让您在实际开发过程中灵活运用,课程准备了相应案例,更透彻的分析了知识点。

主讲:前端高级讲师 | 课程时长:11课时| 学习人数:1048人 | 难度: 进阶

免费

立即报名

课程简介

该课程详细全面的介绍并实现网站中主要应用的动态效果,在练习动效的同时,让学员重新认识DOM、元素节点、课程语句等相关操作及应用。案例与知识点的有效结合,能够让学员在实际开发过程中灵活运用并且更透彻的理解知识点。

适合人群

1.适合有HTML和CSS基础的人群

2.掌握一定的JS基础知识的人群

课程亮点

1.科学的授课方式,知识点由浅入深,层层剖析

2.丰富且酷炫的案例分析及实现,如轮播图、旋转木马等,打造生动形象的动态网页效果

3.提供各种应用型解决方案

主讲内容

1-轮播图和焦点图案例

2-放大镜案例

3-互联网全终端项目-好客租房项目

4-正则表达式语法和使用

5-5-offset系列属性使用介绍

6-Math对象的常用方法

7-动画函数使用介绍

8-scroll系列属性使用介绍

9-缓动动画封装及案例

10-访问属性的两种方式

11-获取计算后样式的兼容函数

12-封装缓动框架使用介绍及案例

13-client系列属性使用介绍

14-offset、scroll、client三大系列总结

15-client系列属性应用介绍

16-数组复习

17-旋转木马案例

18-事件对象

19-三个重要坐标

20-可拖拽效果案例

21-滚动条特效案例

22-事件冒泡和阻止冒泡及案例

23-事件对象兼容处理

24-鼠标事件和键盘事件

25-按回车键切换文本框

26-按esc关闭

27-表单事件

28-完整版表单验证案例

29-封装trim方法

30-递归使用介绍

实战项目

旋转木马案例

该项目效果的实现,首先需要建立一个数组给每一张图片写出对应的z-index, opacity, top, width等属性;进而将数组中第一组值放到最后一组,点下按钮执行操作,最终实现旋转的操作。在此期间,应用动画的封装来加快开发的效率。

学完收获

1.实现轮播图动画效果

2.实现旋转木马动画效果

3.实现手风琴动画效果

4.实现放大镜效果等

学前基础要求

1.具备HTML和CSS基础编程能力 2.具备一定的JS基础知识