Js学习—妙味课堂0-4

上集回顾：

选项卡：

• 效果思路

js简易日历：

• innerHTML
• 数组的使用

定时器的使用：

• 开启
• 关闭

数码时钟：

• 获取系统时间
• 显示系统时间
• 设置图片路径

 

本课练习：

1.延时提示框（二级标题）

问题：

1. 移开一级标题后，二级标题立即消失
2. 移出灰框之后，二级标题不再消失
3. 移出灰框，灰框消失再移到红框上时，灰框会闪一下。

解决：

1. 通过使用：延时型定时器 setTimeout函数,300)延时隐藏 ; 定义二级标题的ommouseover清除定时器函数 （这里的函数可以不是调用，而是直接在此处写定义）
2. 给二级标题定义onmouserout函数，隐藏二级标题。
3. 移出二级标题之后，设置定时器，不让二级标题立即消失。在一级标题的onmouseover定义函数clear).

补充：

• 函数的重用，简化代码，合并两个onmouseover和onmouseout。
• 连等的利用，省略函数起名。

 

2.无缝滚动：

物体运动基础：  利用绝对定位

1. 让div动起来 （不断让left变大）
2. offsetleft  某一个元素的左边距margin-left的数值): oDiv.style.left=oDiv.offsetleft+5+'px';
3. 用定时器让物体连续移动

图片滚动： div与overflow: hidden;属性的应用

1. 先让其滚动
2. 让其循环滚动

采用瞬间拉回的方法，“障眼法”，实现循环滚动的现象。if  else 判断)

 

无缝滚动—扩展：

• 两个按钮该表图片滚动方向 — 修改iSpeed和判断条件；
• 鼠标移入的时候暂停 — 鼠标移入时关闭定时器，移除时重新启动。

补充：

• offsetLeft  //左边距
• offsetTop  //上边距
• offsetWidth  //宽度
• iffsetheight  //高度

 

本课知识点：

• 延时提示框
• 物体运动基础
• offsetXXX
• 无缝滚动
• innerHTML复制 

 

本课练习：

1. 按下鼠标，图片开始滚动；松开鼠标，运动停止
2. QQ延时提示框：延时隐藏+延时显示
3. 站长之家导航条：鼠标移入，显示二级标题（多个项目）

 

下课预告： 总结前4节+应用

• 二级导航菜单；
• 迅雷评分