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

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

WBOY

Libérer： 2016-05-16 15:19:38

original

1506 Les gens l'ont consulté

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>

Copier après la connexion

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.