javascript-頁面中滑鼠移動或停留均顯示提示框-js教程-PHP中文網

javascript-頁面中滑鼠移動或停留均顯示提示框

php是最好的语言

發布： 2018-08-06 10:19:24

原創

3172 人瀏覽過

滑鼠移動到隱藏內容時顯示提示框，滑鼠停留在提示框時依舊顯示。滑鼠離開提示框和隱藏內容時提示框消失。

使用時配合table框是固定寬度，將超過寬度的多餘資訊予以省略號顯示。

將table框CSS設定為

table-layout: fixed;
word-break: break-all;

登入後複製

多餘的字元顯示為省略號：

.hideMore {
    width:60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

登入後複製

顯示提示方塊時使用到的方法說明：

1 、delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序，並規定當這些事件發生時執行的函數。

使用 delegate() 方法的事件處理程序適用於目前或未來的元素（例如由腳本建立的新元素）。

2、setTimeout() 方法用於在指定的毫秒數後呼叫函數或計算表達式。

<body>
<table>
//表格内多余的seat将被用省略号来显示
//鼠标移动到这里将显示提示框提示内容(可以自定义)
<td class="hideMore"><span alert-content="$!{policy.seat}">$!{policy.seat}</span>
<table>
<body>

登入後複製

javascript代码：
  
$(function () {

var tableShow = null;
            var tipShow = null;
            var delayTime = 200;
             //离开至表格隐藏tip
            $("body").delegate("span", "mouseleave", function () {
                tipShow = setTimeout(function () {
                    $(&#39;[data-ui="alert-layer"]&#39;).remove()
                }, delayTime)
            });
                    //移动至表格显示tip
                    $("body").delegate("span", "mouseover", function () {
                        var seat = $(this);
                        tableShow = setTimeout(function () {
                            showTip(seat)
                        }, delayTime)
                    });
            //在tip上继续显示
            $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseover", function () {
                clearTimeout(tipShow)
            });
                    //离开tip隐藏
                    $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseleave", function () {
                        tipShow = setTimeout(function () {
                            $(&#39;[data-ui="alert-layer"]&#39;).remove()
                        }, delayTime)
                    });
            //予以显示
            function showTip(seat) {
                var content = seat.attr("alert-content");
                var position = {
                    top: seat.offset().top + seat.height(),
                    left: seat.offset().left-3,
                    index: 9999
                };
                var content = "<p data-ui=\"alert-layer\" class=\"more-seat\"><p class=\"bg\"></p>"+content+"</p>";
                $(&#39;[data-ui="alert-layer"]&#39;).length || ($("body").append(content),
                        $(&#39;[data-ui="alert-layer"]&#39;).css(position))
            }
})

登入後複製

//显示 提示框p的CSS样式
.more-seat {
        white-space: nowrap;
        color: #566c7e;
        position: absolute;
        z-index: 99999;
        background: #f8fcff;
        line-height: normal;
        border: 1px solid #c3d5e3;
        padding: 14px 16px;
        cursor: default;
        font-family: verdana;
    }

登入後複製

使用範例：

javascript-頁面中滑鼠移動或停留均顯示提示框