HTML5开发项目实战:Tooltip 认证专享

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

    目录 收起>

    本课通过对Tooltip的讲解,完成Tooltip提示框的效果。使用a标签及css样式完成基本布局,在通过使用JavaScript对DOM元素的操作完成提示框的现实及隐藏。让学员掌握Tooltip的实现过程。

    1.本课概要 00:00:35

    本课通过对 Tooltip 的讲解,完成 Tooltip 提示框的效果。使用 a 标签及 css 样式完成基本布局,在通过使用 JavaScript 对 DOM 元素的操作完成提示框的现实及隐藏。让学员掌握 Tooltip 的实现过程。

    2.提示框布局 00:08:35

    本课时讲解通过使用 HTML 标签和 CSS 样式完成提示框的基本页面布局效果。

    3.添加提示框 00:08:18

    本课时讲解通过使用 JavaScrpit DOM 添加元素,添加监听事件,添加鼠标划过事件,完成第一个提示框的展示 。

    4.处理提示框逻辑 00:09:06

    本课时讲解通过使用 JavaScript 操作 HTML 元素完成提示框位置的摆放,并且使用计时器改善用户体验。

    5.代码优化 00:07:36

    本课时讲解代码的优化,将冗余代码简化,提取成方法,方便后期维护,改变传统的监听事件处理方式,修改成 W3C 的标准。
  • 提问

    提交问题
  • 下载

  • 线路

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

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

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

HTML5开发项目实战:Tooltip

5课时,34分钟2014-11-18
iwen
iwen

极客学院金牌布道师

课程背景:
Tooltip提示框效果是最常见效果之一,在各大网站上不难看到。可以以提示框的形式给用户更多的提示。所以,掌握Tooltip提示框的使用是很有必要的。


核心内容:
1.布局设计
2.提示框设计
3.提示框处理
4.代码优化


软件环境:WebStrom


是否提供资料:


课程等级:初级


适合人群:
具有HTML基础的开发者

  • 技术问答
  • 1

    本课概要

    00:35

    本课通过对 Tooltip 的讲解,完成 Tooltip 提示框的效果。使用 a 标签及 css 样式完成基本布局,在通过使用 JavaScript 对 DOM 元素的操作完成提示框的现实及隐藏。让学员掌握 Tooltip 的实现过程。

  • 2

    提示框布局

    08:35

    本课时讲解通过使用 HTML 标签和 CSS 样式完成提示框的基本页面布局效果。

  • 3

    添加提示框

    08:18

    本课时讲解通过使用 JavaScrpit DOM 添加元素,添加监听事件,添加鼠标划过事件,完成第一个提示框的展示 。

  • 4

    处理提示框逻辑

    09:06

    本课时讲解通过使用 JavaScript 操作 HTML 元素完成提示框位置的摆放,并且使用计时器改善用户体验。

  • 5

    代码优化

    07:36

    本课时讲解代码的优化,将冗余代码简化,提取成方法,方便后期维护,改变传统的监听事件处理方式,修改成 W3C 的标准。

相关课程

  • HTML5元素、属性和格式化

    本套课程主要讲解 HTML5 元素、属性和格式化,掌握 HTML5 元素简介及使用方法、HTML 属性的使用方法和 HTML 格式化使用。

    3课时 21分钟
    初级
    133086人学习
  • CSS入门基础知识

    本课讲解CSS语法,并掌握基本选择器的使用。

    5课时 21分钟
    初级
    78327人学习
  • JavaScript函数

    本课主要讲解JavaScript函数,让学员掌握函数的应用以及变量的作用域

    6课时 29分钟
    初级
    52599人学习
  • JavaScript DOM对象

    本课主要讲解JavaScriptDOM对象,通过对DOM对象的使用操作HTML和CSS

    4课时 24分钟
    初级
    44548人学习