【前端经典案例教程】网页常用特效课程大全

前端特效丰富、多彩，您知道哪些特效是必备的吗? 这些必备特效让您在网站开发时，不再发愁，不再空谈，满足您特效开发基本需求，舞动您的十指，让您的职业技能更上一层楼。

一、导航类

是什么让您在网站的网页之间航游？对!就是它——网页导航，在这里您可以学到各种各样的导航，来吧让我们一起“导航”。

1、形形色色的下拉菜单

使用不同技术实现丰富多彩的下拉菜单。

课程介绍：本课程从易到难，循循渐进，从静态网页布局，到运用HTML/CSS、JavaScript、jQuery不同技术实现动态下拉菜单，让您掌握下拉菜单的制作及在不同浏览器间进行代码调试，解决浏览器兼容问题。

-第1章 HTML/CSS方法实现下拉菜单

1-1 HTML/CSS方法实现下拉菜单

1-2 练习题

1-3 编程练习

-第2章 JS方法实现下拉菜单显示和隐藏

2-1 JS方法实现下拉菜单显示和隐藏 

2-2 练习题

2-3 编程练习

-第3章 jQuery方法实现下拉菜单显示和隐藏

3-1 jQuery方法实现下拉菜单显示和隐藏 

3-2 练习题

3-3 编程练习

-第4章 变幻菜单

4-1 变幻菜单展示及制作（一） 

4-2 变幻菜单制作（二）

4-3 编程练习

-第5章 多级菜单

5-1 CSS实现多级菜单 

5-2 CSS实现三级菜单 

5-3 IE浏览器兼容

5-4 编程练习

-第6章 动画菜单

6-1 动画菜单展示及原理分析

6-2 jQuery实现动画菜单 

6-3 JS实现动画菜单 

6-4 CSS3实现动画菜单分析

6-5 CSS3实现动画菜单 

6-6 CSS3实现动画菜单尖角 

6-7 编程练习

-第7章 特效菜单

7-1 特效菜单

7-2 特效菜单布局 

7-3 jQuery实现特效菜单 

7-4 编程练习

-第8章 响应式菜单

8-1 响应式菜单介绍

8-2 响应式菜单实现

8-3 Bootstrap实现响应式菜单 

8-4 编程练习

2、侧边栏信息展示效果

课程介绍

学会实现侧边栏内容效果展示，能够让你迅速进阶。三个步骤:通过HTML、CSS实现侧边栏内容布局；实现JavaScript代码效果，使用面向对象的方式；在JavaScript代码预留位置，添加动画效果。学会这些，跻身大网站程序员行列，身价倍增，赶快学习！

第1章 效果展示及实现步骤分析

1-1 效果展示及实现步骤分析 

-第2章 用HTML+CSS实现侧边栏页面布局

2-1 使用HTML CSS实现侧边栏菜单布局

2-2 练习题

2-3 用HTML CSS实现菜单栏内容项布局

2-4 练习题

-第3章 使用JavaScript的构造函数创建对象

3-1 用Js的构造函数创建侧边栏对象

3-2 练习题

3-3 侧边栏对象--构造函数的验证

3-4 使用JS的构造函数创建菜单项对象

3-5 练习题

-第4章 侧边栏信息展示效果的动画效果的添加

4-1 动画效果相关知识点讲解 

4-2 关闭侧边栏的动画效果实现 

4-3 打开侧边栏的动画效果实现

4-4 菜单栏内容项的动画效果实现 

4-5 练习题

-第5章 总结

5-1 总结 

---

二、网页特效

各种网页特效，让您的网站更加丰富、炫丽，舞动您的十指，来创造不同的特效。

1、回到顶部效果

课程介绍：回到顶部效果是目前大型网站不可缺少的一部分，也许你已经会用锚链接的方式来实现，是不是不满意呢？这里将重点分享用JavaScript技术来实现，不仅可以设定按钮出现的时机，还能实现对滚动条速度的控制，是不是很炫酷呀！

-第1章 案例效果展示及锚链接

1-1 案例效果展示及锚链接

-第2章 案例实现中相关知识点讲解

2-1 案例实现中相关知识点讲解 

-第3章 用HTML+CSS实现页面布局

3-1 用HTML CSS实现页面布局

3-2 编程练习

-第4章 用JavaScript实现回到顶部效果

4-1 用JavaScript实现回到顶部效果

4-2 用JavaScript实现“按钮”的显示与隐藏 

4-3 练习题

4-4 编程练习

2、弹出层效果

课程介绍：在各大网站中，我们常运用弹出层效果实现登陆和图片展示效果。本课程主要讲解如何定位、如何创建，插入，删除网页元素，并从静态网页布局到JS代码实现，详细分析每个环节，让您能灵活运用知识，制作出超炫、超实用的弹出层效果。

-第1章 效果简介

1-1 效果简介 

-第2章 静态页面实现

2-1 静态页面实现 

2-2 练习题

2-3 编程练习

-第3章 JS实现动态效果

3-1 JS实现遮罩层 

3-2 JS实现登录框

3-3 实现动态效果

3-4 练习题

3-5 练习题

3-6 练习题

3-7 练习题

3-8 编程练习

-第4章 编程挑战

4-1 编程挑战

3、网页广告特效

课程介绍：帮您深度分析广告特效原理，分步剖析制作过程，从浅到深，逐步优化代码，让你深入理解，并灵活运用知识，举一反三，制作出绚丽的广告特效。

第1章 使用JS实现右下角广告特效

1-1 右下角广告 

1-2 媒体文件添加

1-3 伸缩式右下角广告 

1-4 代码优化 

1-5 练习题

1-6 编程练习

-第2章 使用JS实现顶部广告伸缩特效

2-1 广告伸缩原理 

2-2 广告展开效果 

2-3 广告收起效果

2-4 带关闭按钮的伸缩广告

2-5 编程练习

-第3章 带缓冲效果的弹出广告

3-1 带缓冲效果的弹出广告介绍

3-2 带缓冲效果的弹出广告布局 

3-3 JS实现带缓冲效果的弹出广告（一） 

3-4 JS实现带缓冲效果的弹出广告（二）

3-5 jQuery实现带缓冲效果的弹出广告 

4、展开与收起效果

课程介绍：门户网站顶部广告、阅读类网站“查看全文”，电商网站分类导航，都会应用到展开与收起效果。本课程讲解使用JavaScript、jQuery实现动态效果、动画效果原理以及节点式查找控件的方法。通过效果展示与案例分析，让你掌握不同类型展开与收起效果的实现。

-第1章 效果简介

1-1 效果简介 

-第2章 点击按钮控制展开与收起

2-1 使用HTML/CSS实现静态布局 

2-2 使用JavaScript实现动态效果

2-3 练习题

2-4 练习题

2-5 编程练习

-第3章 定时展开与定时收起效果

3-1 使用HTML/CSS实现静态布局 

3-2 使用JavaScript实现动态效果

3-3 练习题

3-4 编程练习

-第4章 jQuery实现点击按钮展开和收起动画效果

4-1 jQuery实现点击按钮展开和收起动画效果

4-2 练习题

4-3 编程练习

-第5章 JavaScript实现多个展开与收起效果

5-1 效果展示及分析案例 

5-2 静态布局制作 

5-3 使用JavaScript实现展开效果 

5-4 使用JavaScript实现收起效果 

5-5 浏览器兼容性 

5-6 练习题

5-7 编程练习

-第6章 回顾总结

6-1 回顾总结 

-第7章 编程挑战

7-1 编程挑战

5、Tooltip浮动提示框效果

课程介绍：本课程详细讲述使用原生JavaScript如何设计和实现Tooltip浮动提示框特效。并通过一步一步的代码实现和代码优化过程，不仅让您掌握特效的实现，还掌握解决问题的思路，了解诸如代码简化、事件绑定、事件冒泡等更多的JavaScript技巧和知识，提升编程兴趣和水平。

-第1章 ToolTip特效介绍

1-1 ToolTip特效介绍 

-第2章 ToolTip特效分析

2-1 ToolTip特效分析 

2-2 练习题

-第3章 ToolTip特效设计

3-1 ToolTip特效设计 

3-2 练习题

3-3 练习题

3-4 练习题

3-5 练习题

3-6 编程练习

-第4章 Tooltip浮动提示框实现

4-1 HTML/CSS静态布局 

4-2 ToolTip提示框实现（一）

4-3 ToolTip提示框实现（二） 

4-4 ToolTip提示框实现（三） 

4-5 编程练习

-第5章 优化代码

5-1 优化代码 

5-2 练习题

5-3 练习题

-第6章 编程挑战

6-1 编程挑战

所有课程由BAT各位技术大牛帮忙录制，视频资源来自慕课网。转载请注明来源，谢谢！