javascript-a prompt box will be displayed when the mouse moves or stays on the page-JS Tutorial-php.cn

javascript-a prompt box will be displayed when the mouse moves or stays on the page

php是最好的语言

Release： 2018-08-06 10:19:24

Original

3217 people have browsed it

The prompt box will be displayed when the mouse moves to the hidden content, and it will still be displayed when the mouse stays on the prompt box. The prompt box disappears when the mouse leaves the prompt box and the content is hidden.

When used, the table box has a fixed width, and excess information exceeding the width will be displayed with ellipses.

Set the table box CSS to

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

Copy after login

Excess characters are displayed as ellipses:

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

Copy after login

Instructions for the method used when displaying the prompt box:

1 The delegate() method adds one or more event handlers to the specified element (a child element of the selected element) and specifies the function to run when these events occur.

Event handlers using the delegate() method apply to the current or future elements (such as new elements created by scripts).

2. The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds.

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

Copy after login

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))
            }
})

Copy after login

//显示 提示框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;
    }

Copy after login

Usage example:

javascript-a prompt box will be displayed when the mouse moves or stays on the page

The technology and methods used are not very advanced, so the experts can leave suggestions.

js mouse movement to display the effect code of the image in the title_image special effects

Hover the mouse for three seconds Then automatically display the large image js code

The above is the detailed content of javascript-a prompt box will be displayed when the mouse moves or stays on the page. For more information, please follow other related articles on the PHP Chinese website!