jQuery实现鼠标移到某个对象时弹出显示层功能
本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能。分享给大家供大家参考,具体如下:
/** *鼠标移上去显示层 *@paramdivId显示的层ID *@returns */ $.fn.myHoverTip=function(divId){ vardiv=$("#"+divId);//要浮动在这个元素旁边的层 div.css("position","absolute");//让这个层可以绝对定位 varself=$(this);//当前对象 self.hover(function(){ div.css("display","block"); varp=self.position();//获取这个元素的left和top varx=p.left+self.width();//获取这个浮动层的left vardocWidth=$(document).width();//获取网页的宽 if(x>docWidth-div.width()-20){ x=p.left-div.width(); } div.css("left",x); div.css("top",p.top); div.show(); }, function(){ div.css("display","none"); } ); returnthis; }
在哪个对象旁边显示DIV,随自己定义,只要定义一个ID即可:
如:
查看收件人回执情况
需要显示的DIV,根据需求自己定义,同样只需定义ID即可:
如:
(www.nhooo.com提示信息)
调用上面的JS函数,代码如下:
$('#viewReInfo').myHoverTip('receiptInfo');
测试示例如下:
www.nhooo.comjQuery弹出提示框 查看收件人回执情况 (www.nhooo.com提示信息)