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>