Maison > Article > interface Web > javascript - une boîte de dialogue s'affichera lorsque la souris bouge ou reste sur la page

javascript - une boîte de dialogue s'affichera lorsque la souris bouge ou reste sur la page

php是最好的语言original: 2018-08-06 10:19:243172parcourir

La boîte de dialogue s'affichera lorsque la souris se déplacera vers le contenu masqué, et elle sera toujours affichée lorsque la souris restera sur la boîte de dialogue. La boîte d'invite disparaît lorsque la souris quitte la boîte d'invite et le contenu est masqué.

Lorsqu'elle est utilisée avec la zone de tableau, la largeur est fixe et les informations excédentaires qui dépassent la largeur sont affichées avec des points de suspension.

Définissez le CSS de la zone de tableau sur

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

Les caractères supplémentaires sont affichés sous forme d'ellipses :

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

Instructions pour la méthode utilisée lors de l'affichage de la boîte d'invite :

1. La méthode délégué() ajoute un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné) et spécifie la fonction à exécuter lorsque ces événements se produisent.

Les gestionnaires d'événements utilisant la méthode délégué() s'appliquent aux éléments actuels ou futurs (tels que les nouveaux éléments créés par des scripts).

2. La méthode setTimeout() est utilisée pour appeler une fonction ou calculer une expression après un nombre spécifié de millisecondes.

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

Exemple d'utilisation :

javascript - une boîte de dialogue saffichera lorsque la souris bouge ou reste sur la page

La technologie et les méthodes utilisées ne sont pas très avancées, le maître peut laisser des suggestions.

Articles associés :

Mouvement de la souris JS pour afficher le code de l'effet d'image dans les effets spéciaux title_Image

Passez la souris pendant trois secondes Affichez ensuite automatiquement le code js de la grande image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css Delegate JS 事件 table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication systématique des points de connaissance de la programmation asynchrone JavascriptArticle suivant：Explication systématique des points de connaissance de la programmation asynchrone Javascript

Articles Liés

Voir plus