Berdasarkan JavaScript, tuding tetikus memunculkan lapisan maklumat dengan anak panah yang mengikuti kemahiran pergerakan tetikus

Berdasarkan JavaScript, tuding tetikus memunculkan lapisan maklumat dengan anak panah yang mengikuti kemahiran pergerakan tetikus_javascript

WBOY

Lepaskan： 2016-05-16 15:19:38

asal

1506 orang telah melayarinya

Banyak tapak web boleh memaparkan lapisan penerangan maklumat apabila tetikus melayang di atas elemen, dan lapisan ini boleh mengikut pergerakan tetikus Pada masa yang sama, lapisan pop timbul mempunyai anak panah, yang menghala ke elemen tetikus melayang di atas Berikut ialah contoh Kod memperkenalkan secara ringkas cara untuk mencapai kesan ini.
Contoh kod adalah seperti berikut:

<!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>

Salin selepas log masuk

Kod di atas menyedari keperluan kami Apabila tetikus diletakkan dalam div, lapisan maklumat boleh muncul dan boleh mengikuti pergerakan tetikus Lapisan pop timbul mempunyai anak panah yang menunjukkannya dan saya tidak akan memperkenalkannya di sini, jika anda mempunyai sebarang pertanyaan, anda boleh meninggalkan mesej atau merujuk kepada bacaan yang berkaitan.