今日帮同事调页面脚本的时候碰到了一个要在鼠标点击位置弹出DIV，说实话，对于弹出层的控制上了解并不多，不过呢既然答应了还是要解决问题的。没办法了，只能硬着头皮上，先是了解了一下弹出层的原理，以前只是用现成的，却从来没去细想过研究，如今一琢磨，发现也挺有意思的。
废话不多说了，先把代码整上来，有什么不对的地方还是请大家指教。
/// <summary> /// 光标位置显示弹出层 /// </summary> /// <param name="C_id">鼠标点击对象ID</param> /// <param name="D_id">弹出层对象ID</param> function D_Show(C_id,D_id) { //D_top : 弹出层的top属性（单位:px） D_left : 弹出层的left属性（单位:px） P_heiht : 当前网页的高度 P_width : 当前网页的宽度 //C_top : 鼠标点击对象的top属性 C_left : 鼠标点击对象的left属性 C_heigth : 鼠标点击对象的高度 C_width : 鼠标点击对象的宽度 //C_obj : 鼠标点击对象 D_obj ：弹出层对象 D_height ：弹出层对象高度 D_width ：弹出层对象宽度 var D_top,D_left,P_heiht,P_width,C_top,C_left,C_heigth,C_width,C_obj,D_obj,D_height,D_width; //鼠标点击对象 C_obj=$("#"+C_id); //要显示的弹出层对象 D_obj=$("#"+D_id); //取得弹出层高度 D_height=D_obj.height(); //取得弹出层宽度 D_width=D_obj.width(); //取得鼠标点击对象高度 C_heigth = C_obj.height(); //取得鼠标点击对象宽度 C_width = C_obj.width(); //取得当前页面高度 P_heiht = pageHeight(); //取得当前页面宽度 P_width = pageWidth(); var offset = C_obj.offset(); //取得鼠标点击对象top属性 C_top = offset.top; //取得鼠标点击对象left属性 C_left = offset.left; //计算弹出层的top属性值 if(P_heiht-(C_top+C_heigth+D_height)>=0) { D_top=C_top+C_heigth; } else { D_top = C_top-D_height; } D_top=D_top+"px"; //计算弹出层的left属性值 if(P_width-(C_left+D_width)>=0) { D_left=C_left; } else { if(D_width>=C_width) { D_left=C_left-(D_width-C_width); } else { D_left=C_left+C_width; } } D_left=D_left+"px"; D_obj.css({top:D_top,left:D_left,position:"absolute",visibility:"visible",display:"block"}); }; /// <summary> /// 隐藏弹出层 /// </summary> /// <param name="D_id">弹出层ID</param> function D_Clost(D_id){ $("#"+D_id).css("display","none"); } //返回当前网页高度 function pageHeight() { if($.browser.msie) { return document.compatMode=="CSS1Compat"?document.documentElement.scrollHeight: document.body.clientHeight; } else { return self.innerHeight; } }; //返回当前网页宽度 function pageWidth() { if($.browser.msie) { return document.compatMode=="CSS1Compat"?document.documentElement.scrollWidth: document.body.clientWidth; } else { return self.innerWidth; } }; //返回当前浏览器高度 function browserHeight() { if($.browser.msie) { return document.compatMode=="CSS1Compat"?document.documentElement.clientHeight: document.body.clientHeight; } else { return self.innerHeight; } }; //返回当前浏览器宽度 function browserWidth() { if($.browser.msie) { return document.compatMode=="CSS1Compat"?document.documentElement.clientWidth: document.body.clientWidth; } else { return self.innerWidth; } };
转载于:https://www.cnblogs.com/mahongbo/archive/2010/08/16/1800321.html
相关资源：鼠标经过时弹出层的效果示例