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程序设计有所帮助。
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志