JQuery(27)——鼠标

1、获得发生事件时鼠标的位置：

$(document).mousemove(function(e) {document.title = e.pageX + "," + e.pageY;});

2、在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

3、练习2：跟着鼠标走的文字（小天使）：

    <script type="text/javascript">$(document).mousemove(function(e) {$("#tips1").css("top",e.pageY+20).css("left",e.pageX);});</script><div id="tips1" style="position:fixed">跟着你</div>

$(document)表示整个浏览器页面窗口，$(body)仅表示可用范围。

4、练习3：Tooltips效果：

<a href="" id="cslink">C#</a>$("#cslink").mouseover(function(e) {var tooltip = $("<div>C微软公司推出的基于<font color='red'>.Net平台</font>的语言。<div>");tooltip.css("position", "fixed");tooltip.css("background-color","yellow");tooltip.css("top", e.pageY + 20).css("left", e.pageX);$("body").append(tooltip);$("#cslink").mouseout(function() {tooltip.remove();});});

通过闭包，不用给tooltip声明id才能remove。

5、练习4：带图片的Tooltips：

    <style type="text/css">.tooltip{position:fixed;background-color:Yellow;}        </style><script type="text/javascript">$("#cslink").mouseover(function(e) {var tooltip = $("<div class='tooltip'>C微软公司推出的基于<font color='red'>.Net平台</font>的语言。<br/><img src='images/csharp1.jpg'/><br/><input type='button' value='关闭' onclick='closeTooltip()'/> <div>");tooltip.css("top", e.pageY + 20).css("left", e.pageX);closeTooltip();//关闭旧的$("body").append(tooltip);});function closeTooltip() {$(".tooltip").remove();}</script>