点击弹出一个div并显示在鼠标右下方

最新推荐文章于 2022-06-08 20:27:44 发布

转载最新推荐文章于 2022-06-08 20:27:44 发布 · 3k 阅读

文章标签：

本文介绍了一种鼠标悬停触发显示包含div2内容的层的方法，通过改变层的位置来适应鼠标位置，并实现了层的显示与隐藏功能。

//在鼠标显示一个层，该层的内空为div2的内容
function showTip(img){
$("#img_gis").attr("src","../../JS/StreetMap/gisPicture/"+img);
var div3 = document.getElementById('div3'); //将要弹出的层
div3.style.display="block"; //div3初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
div3.style.top=event.clientY+5;
div3.style.position="absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
var div2 =document.getElementById('div2');
div3.innerHTML=div2.innerHTML;
}
//关闭层div3的显示
function closeTip(){
var div3 = document.getElementById('div3');
div3.style.display="none";
}

//控制层div2显示的开关
function switchDIV(){
if(div2.style.display=='block'){
div2.style.display='none';
}
else{
div2.style.display='block';
}

}