使用 jQuery 实现多种类型的导航条(上) 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本课程主要通过 jQuery 和 CSS3 进行实际应用,实现在网站中常见的多种类型的导航条,学习完这个课程可以轻松的应用 jQuery 和 CSS3 的各种交互特效,以及 jQuery 的动画插件jquery.easing.1.3 的使用。

    1.当前页面高亮显示的通栏导航条 00:27:43

    简单介绍基础的通栏导航条的布局结构,通过制作多个页面,实现在不同页面都能高亮显示当前所在页的导航。

    2.可以中英切换的导航条 00:20:43

    让通栏导航具有中英切换的样式,通过 CSS3 的 transition 过渡和jQuery 的 animate 方法分别实现。

    3.带弹性动画的下拉框导航条 00:27:13

    该课程通过三种不同的方式分别实现带有下拉框的导航条,通过该课程学习下拉框导航的布局方式,jQuery 的 slideDown 和 slideUp滑动方法,以及 jQuery 的插件 jquery.easing.1.3 的使用。

    4.摩擦运动动画跟随的导航条 00:28:28

    这个课时作为该课程的总结,做一个滑块跟随鼠标指针进行移动,并且可以根据不同页面,将滑块的初识位置进行重定义。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

使用 jQuery 实现多种类型的导航条(上)

4课时,104分钟2016-01-26
写代码的平面师
写代码的平面师

极客学院签约布道师

课程背景:
无论是企业站或者是电商站,导航条起到了各个页面的关联作用,导航条的类型有很多,有通栏导航条,有为了美观性的中英切换导航,还有带有下拉框的导航条,这些导航条都是根据网站内容而定,因此学习该课程你能够了解现在网站经常出现的导航条样式,并可以灵活的运用。

核心内容:
1.用 JavaScript 获取地址栏网址
2.CSS3 中 transition 过渡
3.jQuery 的 slideDown 与 slideUp 滑动
4.animate 动画
5.jquery.easing.1.3 各种动画插件

软件环境:Dreamweaver

是否提供资料:

课程等级:中级

适合人群:
具有 JavaScript 基础或 jQuery 基础的同学
  • 技术问答
  • 1

    当前页面高亮显示的通栏导航条

    27:43

    简单介绍基础的通栏导航条的布局结构,通过制作多个页面,实现在不同页面都能高亮显示当前所在页的导航。

  • 2

    可以中英切换的导航条

    20:43

    让通栏导航具有中英切换的样式,通过 CSS3 的 transition 过渡和jQuery 的 animate 方法分别实现。

  • 3

    带弹性动画的下拉框导航条

    27:13

    该课程通过三种不同的方式分别实现带有下拉框的导航条,通过该课程学习下拉框导航的布局方式,jQuery 的 slideDown 和 slideUp滑动方法,以及 jQuery 的插件 jquery.easing.1.3 的使用。

  • 4

    摩擦运动动画跟随的导航条

    28:28

    这个课时作为该课程的总结,做一个滑块跟随鼠标指针进行移动,并且可以根据不同页面,将滑块的初识位置进行重定义。

相关课程

  • 使用 jQuery 制作京东网的焦点图

    本课程主要学习 JavaScript 的函数,会用到定时器setInterval,并且可以使用到 jQuery 的mouseover 鼠标事件及 click 点击事件,通过 animate 动画方法,制作一个可自动和手动控制的轮播焦点图。

    4课时 65分钟
    中级
    11452人学习
  • 在 jQuery 中使用 AJAX

    jQuery 是当前应用最广泛的 JavaScript 库,它提供了大量 AJAX API,提升了 AJAX 使用的便利性,本课程详细讲解 jQuery AJAX 相关 API 的使用。

    4课时 92分钟
    初级
    19824人学习
  • Three.js 核心对象

    本课着重讲解 Three.js 的核心对象,对场景、Object3D、相机、渲染器、材质、贴图以及基本灯光等常用对象进行详细介绍,为后面实战开发打好理论基础。并通过相应的实例小程序,加深和巩固理论知识,做到知其所以然。

    6课时 33分钟
    初级
    9184人学习
  • AngularJS 之移动 APP 开发

    本课程主要讲解如何使用 AngularJS+Ionic+Cordova 来开发移动 APP,包括 Ionic 的简介,Cordova 的简介,开发环境的搭建,以及 联系人 APP 的开发。

    4课时 47分钟
    高级
    24325人学习