jQuery学习笔记4——event.pageX()方法/event.pageY()方法
该方法的作用是获取到光标相对于页面的X坐标和Y坐标。网页中常用的title提示效果就和这两个属性有关。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>超链接提示效果</title><script type="text/javascript" src="jquery-1.2.6.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$(document).ready(function()
var x=10; var y=20;
$("a.tooltip").mouseover(function(e){
$( this.myTitle = this.title; this.title=""; var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip") .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px"
}).show("fast"); }).mouseout(function(){ $("#tooltip").remove(); this.title = this.myTitle; })
}) </script><style type="text/css">body{ }#tooltip{ position:absolute; width:120px;height:22px; line-height:22px; border:1px solid #ccc; background:#f6f6f6; font-size:12px;}</style></head><body><p><a href="#" class="tooltip" title="这是我的超链接提示1">提示</a></p><p><a href="#" class="tooltip" title="这是我的超链接提示2">提示</a></p><p><a hef="#" title="这是自带提示1">自带提示1</a></p><p><a hef="#" title="这是自带提示2">自带提示2</a></p></body></html>