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程序设计有所帮助。