자바스크립트 기반으로 마우스를 올리면 마우스 움직임_javascript 스킬을 따라가는 화살표가 있는 정보 레이어가 팝업됩니다.
- WBOY원래의
- 2016-05-16 15:19:381482검색
많은 웹사이트에서 요소 위에 마우스를 올리면 정보 설명 레이어가 팝업될 수 있으며, 이 레이어는 마우스의 움직임을 따라갈 수 있습니다. 동시에 팝업 레이어에는 화살표가 있습니다. 여기에 마우스를 올려놓은 요소를 가리킵니다. 다음은 이 효과를 얻는 방법을 간략하게 소개하는 코드입니다.
코드 예시는 다음과 같습니다.
<!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에 마우스를 놓으면 정보 레이어가 팝업되어 마우스의 움직임을 따라갈 수 있습니다. 팝업 레이어에는 이를 나타내는 화살표가 있습니다. 여기서는 소개하지 않습니다. 질문이 있는 경우 메시지를 남기거나 관련 자료를 참조하세요.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.