cari

Rumah >hujung hadapan web >tutorial js >Berdasarkan JavaScript, tuding tetikus memunculkan lapisan maklumat dengan anak panah yang mengikuti kemahiran pergerakan tetikus_javascript

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

WBOY
WBOYasal
2016-05-16 15:19:381514semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Javascript melaksanakan kemahiran countdown jump page_javascriptArtikel seterusnya：Javascript melaksanakan kemahiran countdown jump page_javascript

Artikel berkaitan

Lihat lagi