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() {
        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 >

转载于:https://www.cnblogs.com/guopei/articles/1520648.html