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

1,062次阅读
没有评论

共计 944 个字符,预计需要花费 3 分钟才能阅读完成。

什么是layer

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

问题

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

问题演示

【前端教程】防止layer.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');
            }
        });
    }
});

最终效果

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

正文完
 
lvshujun
版权声明:本站原创文章,由 lvshujun 2020-04-16发表,共计944字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请联系站长并注明出处。
评论(没有评论)