宝哥软件园

javascript实现延时显示提示框效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-04

射流研究…延时提示框效果演示:

实现方法

移入显示,移出隐藏

移除延时隐藏,可以实现从第一个差异移入第二个div,仍然可以显示

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /title无标题文档/title/head style # div 1 { width : 50px;高度: 50px背景:红色;float : left } # div 2 { margin-left : 10px;宽度: 250像素;高度: 150像素;背景:黄色;向左浮动:显示: none }/stylescriptwindow。onload=function(){ var ODI v1=document。getelementbyid(' div 1 ');var ODI v2=文档。getelementbyid(' div 2 ');定义变量计时器=nullODI v1。onmouseover=ODI v2。onmouseover=function(){ cleartime out(计时器);ODI v2。风格。display=' block};ODI v1。onmouseout=ODI v2。onmouseout=function(){ timer=setTimeout(function(){ ODI v2。风格。显示='无';} ,500);};};/scriptbodydiv id=' div 1 '/div div id=' div 2 '/div/body/HTMlGithub源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+