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 儿童毕业祝福语 简短6
14 开工仪式横幅祝福语简短
15 孩子日常祝福语大全简短
16 清晨寄语诗句祝福语简短
17 结婚送亲认亲祝福语简短
18 虎年喝酒拜年祝福语简短