记录下,以备将来用到
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>无标题页</title>
<script type=
"text/javascript"
src=
"jquery-1.4.2.min.js"
></script>
<script type=
"text/javascript"
>
function
ShowTip(event,obj,message)
{
var
xOffset = -10;
// x distance from mouse
var
yOffset = 10;
// y distance from mouse
//obj.style.top = (event.clientX + yOffset)+"px";
//obj.style.left = (event.clientY + xOffset)+"px";
//获取元素width: $(obj).width();
//获取元素height:$(obj).height()
//获取元素位置:$(obj).position().top和$(obj).offset().top
$(
'body'
).append(
'<div id="tipmessage">'
+message+
'</div>'
);
$(
'div#tipmessage'
).css(
"top"
, $(obj).position().top+$(obj).height() +
"px"
).css(
"left"
, $(obj).position().left+
"px"
).fadeIn(
"slow"
);
}
function
HideTip()
{
$(
"div#tipmessage"
).fadeOut(
"slow"
).remove();
}
</script>
<style type=
"text/css"
>
#tipmessage
{
display:none;
z-index:1000;
border:1px solid
#448833;
position:absolute;
background:
#ffffff;
max-width:200px;
max-height:30px;
padding:5px 10px;
}
</style>
</head>
<body>
<a href=
"#"
onmouseover=
"ShowTip(event,this,'欢迎访问脚本之家')"
onmouseout=
"HideTip()"
>Tip</a>
</body>
</html>