많은 웹사이트에서 요소 위에 마우스를 올리면 정보 설명 레이어가 팝업될 수 있으며, 이 레이어는 마우스의 움직임을 따라갈 수 있습니다. 동시에 팝업 레이어에는 화살표가 있습니다. 여기에 마우스를 올려놓은 요소를 가리킵니다. 다음은 이 효과를 얻는 방법을 간략하게 소개하는 코드입니다.
코드 예시는 다음과 같습니다.
<!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>
위의 코드는 div에 마우스를 놓으면 정보 레이어가 팝업되어 마우스의 움직임을 따라갈 수 있습니다. 팝업 레이어에는 이를 나타내는 화살표가 있습니다. 여기서는 소개하지 않습니다. 질문이 있는 경우 메시지를 남기거나 관련 자료를 참조하세요.