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 婆婆高寿祝福语大全简短