jquery悬浮提示框完整实例
本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考,具体如下:
<html> <head> <scripttype="text/javascript"src="jquery.js"></script> <scripttype="text/javascript"> $(function(){ x=5; y=15; $("p").hover(function(e){ otitle=this.title; this.title=""; varndiv="<divid='leo'>"+otitle+"</div>"; $("body").append(ndiv); $("#leo").css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" }).show(2000); $(this).mousemove(function(e){ $("#leo").css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" }).show(1000); }); },function(){ this.title=otitle; $("#leo").remove(); }); }); </script> <styletype="text/css"> #leo{ position:absolute; border:1pxsolidgrey; opacity:0.8; background:grey; } </style> </head> <body> <ptitle="1dfgfdgdfg">Ifyouclickonme,Iwilldisappear.</p> <ptitle="2dgfdgdfgdf">Ifyouclickonme,Iwilldisappear.</p> <ptitle="3dgfdgfdgfder">Ifyouclickonme,Iwilldisappear.</p> <ptitle="4ghfghfghfhgf">Ifyouclickonme,Iwilldisappear.</p> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。