jquery实现简单文字提示效果
本文实例讲述了jquery实现简单文字提示效果。分享给大家供大家参考，具体如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>jquery实现简单文字提示</title>
<styletype="text/css">
#preview{border:2pxsolid#c7c7c7;background:#e3f4f9;padding:5px;display:none;position:absolute;}
</style>
<scriptsrc="jquery-1.2.6.pack.js"type="text/javascript"></script>
</head>
<body>
<aclass="preview"title="看看提示出现了没">移到我身上来！！</a>
<scripttype="text/javascript">
this.imagePreview=function(){
/*CONFIG*/
xOffset=10;
yOffset=20;
//可以自己设定偏移值
/*ENDCONFIG*/
$("a.preview").hover(function(e){
this.t=this.title;
this.title="";
varc=(this.t!="")?""+this.t:"";
$("body").append("<divid='preview'>"+c+"</div>");
$("#preview")
.css("top",(e.pageY-xOffset)+"px")
.css("left",(e.pageX+yOffset)+"px")
.fadeIn("fast");
},
function(){
this.title=this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY-xOffset)+"px")
.css("left",(e.pageX+yOffset)+"px");
});
};
//页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>
jquery-1.2.6.pack.js插件点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。