logo

  • 首页
  • 博客简介
  • 说说页面
  • 关于
  • 文章存档
    • C#教程
    • C#实战
  • 隐私政策
  • 首页
  • 博客简介
  • 说说页面
  • 关于
  • 文章存档
  • 隐私政策
您正在使用IE浏览器,部分内容可能无法显示,建议您换用更新的浏览器,请单击下载Chrome浏览器
显示屏过小,本网站无法正常显示
你处于离线状态,正在显示缓存网页
首页/ 分类:前端教程/ 【前端教程】防止layer.tips闪烁

【前端教程】防止layer.tips闪烁

2020年7月23日 14:06:09 吕舒君 0 百度已收录 600 次浏览
前置知识

什么是layer

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。 在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被10948136人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。 layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。

问题

由于使用mouseover事件会在每一次鼠标移入时触发,当前一个tips未关闭时移入鼠标会造成tips位置的移动,如下图。

问题演示

使用的代码

$('.loginin').mouseover(function(){
      var that = this;
      layer.tips('您好,您已登录!', that,{
          tips: 3,
          end:function(){
              $('.tiping').removeClass('tiping');
          }
      });
  });

解决方法

在显示tips的元素上添加一个tiping类,当tips销毁时删除。显示tips时,只要检测到有该类便不显示

优化代码

$('.loginin').mouseover(function(){
      if(!$(this).hasClass('tiping'))
      {
          $(this).addClass('tiping');
          var that = this;
          layer.tips('您好,您已登录!', that,{
              tips: 3,
              end:function(){
                  $('.tiping').removeClass('tiping');
              }
          });
      }
  });

最终效果

作者头像
吕舒君
就是本站站长(^_−)☆
提示
你已经点赞过了
上一篇文章缩略图
【前端教程】如何实现鼠标点击爆炸特效
« 上一篇文章
下一篇文章缩略图
【转载】突破百度网盘限速工具Pandownload作者被抓 非法获利30万余元
下一篇文章 »
原创声明
版权声明: 本文由作者吕舒君于2020年7月23日 14:06:09原创发表.
转载请务必取得作者同意, 并附带本页面地址: https://cszj.wang/1460.html
查看作者 吕舒君 的所有文章
发表评论
account_circle
email
email
评论区
共0条回复
暂无评论,说说你的看法吧!
侧边栏
文章目录
  • 什么是layer
  • 问题
  • 问题演示
  • 使用的代码
  • 解决方法
  • 优化代码
  • 最终效果
最近文章
文章缩略图
【Windows】Windows11初体验
升级&安装 不久前,微软刚刚发布了“十年来最重要的操
文章缩略图
【Windows】如何关闭Windows的自动更新
引子 Windows的自动更新的问题已经困扰了一些用户很久了
文章缩略图
【前端教程】如何创建一个属于自己的在线思维导图网站
什么是思维导图 思维导图,英文是The Mind Map,又
文章缩略图
【信奥】Java vs C++
题面 题目描述 Java和C++两种语言的辩手都可以相互争论
文章缩略图
【信奥】收集树叶
题面 描述 给出一棵二叉树,收集并移除所有叶子,重复执行,直
最近文章
您尚未登录
底部推荐
随机文章
文章缩略图
【Windows】Windows11初体验
升级&安装 不久前,微软刚刚发布了“十年来最重要的操
站点统计
文章总数:35篇
评论总数:127条
分类总数:9个
标签总数:81个
网站运行:1994天
最后更新:2022-4-4
友情链接
搜索站 文件管理 洛谷 WordPress大学

吕舒君的博客,一个传递知识的网站!

前往本站
吕舒君的博客
一个传递知识的网站

版权所有·吕舒君(2016-2022)

酷博客(V4.1.0). Theme By 吕舒君. 网站已使用SSL加密 本页面进行了 52 次请求在 0.281 秒内加载完成, 使用了 11.81MB 的内存。