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程序设计有所帮助。
热门推荐
10 财运虎年祝福语简短语
11 单亲爸爸春节祝福语简短
12 狗狗上厕所训练
13 植物种植祝福语简短
14 翻译考试祝福语朋友简短
15 个人周年庆简短祝福语
16 狗狗怎么训练
17 分别祝福语简短搞笑英文
18 生日广州男生祝福语简短