为了账号安全,请及时绑定邮箱和手机立即绑定

用js做延时提示框

标签:
JavaScript

效果预览:http://js.jirengu.com/dunakamini

思想

  1. 首先是做出移入小div就显示大div,移出就隐藏

  2. 之后解决从小的div移动到大div,还保持大div显示

  odiv1.onmouseout = function(){
    timer = setTimeout(function(){
      odiv2.style.display = 'none'
    },500) 
  }
  odiv2.onmouseover = function(){
    clearTimeout(timer)
  }
  1. 再解决大div移动回小的div时的闪烁的问题

  odiv2.onmouseout = function(){
    timer = setTimeout(function(){
      odiv2.style.display = 'none'    //给移出大div时加入一个延时器,然后又要给小div的移入记得清除这一次的延时器,才能保持显示大div
    },500)
  }
  1. 再合并相似的代码

  odiv2.onmouseover = odiv1.onmouseover = function(){
    clearTimeout(timer)
    odiv2.style.display='block'
  }
  odiv2.onmouseout = odiv1.onmouseout = function(){
    timer = setTimeout(function(){
      odiv2.style.display = 'none'
    },500) 
  }



作者:徐金俊
链接:https://www.jianshu.com/p/eeea5b645e6f


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消