首页 > 技术文章 > 前端常用效果-目录

daysme 原文

开始时间:2017-02-27

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

一、导航类

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

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各位技术大牛帮忙录制,视频资源来自慕课网。转载请注明来源,谢谢!

引: http://www.jianshu.com/p/4b2d3437d27a

推荐阅读