Maison > Article > interface Web > Basé sur JavaScript, le survol de la souris fait apparaître la couche d'informations avec des flèches qui suivent les compétences de déplacement de la souris_javascript

Basé sur JavaScript, le survol de la souris fait apparaître la couche d'informations avec des flèches qui suivent les compétences de déplacement de la souris_javascript

WBOYoriginal: 2016-05-16 15:19:381465parcourir

De nombreux sites Web peuvent afficher un calque de description d'informations lorsque la souris survole un élément, et ce calque peut suivre le mouvement de la souris. En même temps, le calque contextuel comporte une flèche qui pointe vers le. élément sur lequel la souris survole Voici un exemple Le code présente brièvement comment obtenir cet effet.
L'exemple de code est le suivant :

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
#content
{
width:100px;
height:100px;
background:green;
position:relative;
margin:100px;
}
#inform
{
width:200px;
height:200px;
border:1px solid #ccc;
background:white;
display:none;
position:absolute;
}
#inform span
{
width:0px;
height:0px;
border-width:10px;
border-style:none solid solid none;
position:absolute;
}
#inform .tb-border
{
left:-10px;
border-color:transparent #ccc transparent transparent;
top:-1px;
}
#inform .tb-background
{
left:-9px;
border-color:transparent white transparent transparent;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var content=document.getElementById("content");
var inform=document.getElementById("inform");
content.onmouseover=function(ev)
{
var ev=ev||event;
inform.style.display="block";
inform.style.left=(ev.clientX-this.offsetLeft+20)+"px";
inform.style.top=(ev.clientY-this.offsetTop-20)+"px";
}
content.onmousemove=function(ev)
{
var ev=ev||event;
inform.style.left=(ev.clientX-this.offsetLeft+20)+"px";
inform.style.top=(ev.clientY-this.offsetTop-10)+"px";
}
content.onmouseout=function(ev){inform.style.display="none";}
}
</script>
</head>
<body>
<div id="content">
<div id="inform">
<span class="tb-border"></span>
<span class="tb-background"></span>
</div>
</div>
</body>
</html>

Le code ci-dessus répond à nos exigences. Lorsque la souris est placée dans le div, un calque d'informations peut apparaître et suivre le mouvement de la souris. Le calque contextuel a une flèche l'indiquant. et je ne le présenterai pas ici, si vous avez des questions, vous pouvez laisser un message ou vous référer à la lecture concernée.

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：Javascript implémente les compétences page_javascript du saut du compte à reboursArticle suivant：Javascript implémente les compétences page_javascript du saut du compte à rebours

Articles Liés

Voir plus