前台文字较多,增加悬浮层显示

最新推荐文章于 2023-12-13 09:50:53 发布

chenghaibing2008

最新推荐文章于 2023-12-13 09:50:53 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络技术

本文链接：https://blog.youkuaiyun.com/chenghaibing2008/article/details/51940502

网络技术专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个JavaScript函数，用于实现文本过长或包含图片时显示悬浮层提示的功能。该函数通过判断文本长度及是否存在图片标签来决定是否显示悬浮层，并根据不同情况调整悬浮层样式。

suspendLayer($('#lblRemind'), 20);

//添加悬浮层
    function suspendLayer(obj, length) {
        var hasImg = obj.parents("td").find("img").length > 0;
        var html=obj.parents("td").find("label").html();

        var temp = obj.parents("td").find("label");
        temp.find("img").remove();//移除图片标签
        var text = temp.text();

        var width =  text.length;
        if (width > length||hasImg) {
            obj.parents("td").find("label").html(text.substring(0, length) + "...");
            var ssLayer = "<div class='susLayer'>" + html + "</div>";
            obj.parents("td").css("position", "relative").append(ssLayer).on("mouseover", function () {
                $(this).find(".susLayer").show();
            }).on("mouseout", function () {
                $(this).find(".susLayer").hide();
            });

            if (!hasImg) {
                obj.parents("td").find(".susLayer").css({ "width": "300px", "text-align": "left", "max-height": "250px", "overflow-y": "auto" });
            } else {
                obj.parents("td").find(".susLayer").css({  "text-align": "left" });
            }
         
        }
    }