最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS实现延时弹出提示框代码
时间:2015-03-19 编辑:简简单单 来源:一聚教程网
提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失。
实现功能思路:
1、获取元素。
2、当鼠标指向Div1时,Div2显示。
3、当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2。
4、当鼠标指向Div2时,Div2显示。因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTimeout清除了就可以实现Div2显示了。
5、当鼠标离开Div2时,使Div2延迟0.5秒消失,这样以便有时间把鼠标指向Div1。
6、第2步已经设置了鼠标指向Div1,Div2就显示,但由于第5步设置setTimeout使Div2消失,所以在第2步加上clearTimeout()把setTimeout清除了就可以实现Div2显示了。
JS代码:
由于代码看起来多差不多,可以简化如下:
HTML、CSS代码:
补充:还有jquery的一些hide(),show()函数都可以直接带数字1或几来表示称了,非常的好用又简单。
-
上一个: 深入分析jsonp使用方法详解
相关文章
- 原生js实现弹出层效果的教程 02-10
- js中SweetAlert.js 弹出层控件使用示例 10-28
- js artDialog弹出层插件使用例子 07-11
- js点击弹出层之后选择中国大学的弹框 04-15
- js点击链接控制弹出div层 03-23
- js延时弹出层控制效果代码 11-21