跟随鼠标的弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

body{font:12px; padding:0; margin:0;}

#bigdiv{width:1000px; margin:0 auto;}

.smalldiv{width:auto; height:100px; background:#066;}

.infoa{color:#fff;}

.infodiv{color:#fff; width:200px; position:absolute; height:150px; background:gray; display:none;}

</style>

</head>

<body>

<a href="#" class="infoa">个人信息AAA</a>

</div>

<a href="#" class="infoa">个人信息BBB</a>

</div>

<a href="#" class="infoa">个人信息CCC</a>

</div>

<a href="#" class="infoa">个人信息DDD</a>

</div>

</div>

</body>

</html>

var oInfoDiv = document.getElementById("infoDiv");

var oInfoa = document.getElementsByClassName("infoa");

for( var i = 0 ; i < oInfoa.length ; i++ ){

oInfoa[i].onclick = function(e){

var e = e || event;

e.stopPropagation ? e.stopPropagation() : e.cancelBuble = true;

oInfoDiv.style.display = "block";

oInfoDiv.style.left = e.pageX +"px";

oInfoDiv.style.top = e.pageY +"px";

}

document.onclick = function(){

oInfoDiv.style.display = "none";

}

</script>

posted on 2019-01-23 16:54 伊人怎会持宠而骄阅读(156) 评论(0) 编辑收藏举报