Jquery7_事件的应用

来源：互联网发布：网络报警怎么报编辑：程序博客网时间：2024/06/07 18:38

======获取当前鼠标的位置========

        $(function () {
            // 不应该用body(要有内容才行) 应该用document文档对象
            $("body").mousemove(function (e) {
                $("#mousePosition").text("横坐标是：" + e.pageX + " " + "纵坐标是：" + e.pageY);
            });

            // 正确获取鼠标位置
            $(document).mousemove(function (e) {
                $("#mousePosition").text("横坐标是：" + e.pageX + " " + "纵坐标是：" + e.pageY);
            });
        });
    </script>
</head>
<body>
    <div id="mousePosition">hahahahah</div>
</body>
</html>

=====图片跟随鼠标移动========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {
                var pX = e.pageX;
                var pY = e.pageY;
                // 以document文档对象为参考位置即（0,0）位置为参考
                $("#img").css({ "position": "absolute", "left": pX, "top": pY, "width": "200px" });
            });
        });
    </script>
</head>
<body>
    <img id="img" src="../Images/5.jpg">
</body>
</html>

======产生提示效果======

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <style type="text/css">
         #toolDiv{margin-left:100px;}

         #toolDiv a{display:block;width:50px;height:50px;background:lightgreen;}

         .Tips{width:150px;height:25px;border:1px solid orange;position:absolute;}
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 产生提示效果
                        $("#toolDiv a").hover(function (e) {
                            // 鼠标停在上面时发生添加层
                            var pX = e.pageX;
                            var pY = e.pageY;
                            var $div = $("<div id='toolTips'>详细信息</div>").attr("class", "Tips").css({ "top": pY, "left": pX });
                            $("body").append($div);
                        }, function () {
                            // 鼠标离开时发生移除层
                            var $div = $("#toolTips");
                            if ($div) {
                                $div.remove();
                            }
                        });
        });
    </script>
</head>
<body>
    <div id="toolDiv">
    <a href="http://www.baidu.com" >baidu</a><br /><br /><br /><br />
    <a href="http://www.nj.com">sina</a><br /><br /><br /><br />
    <a href="http://www.csdn.net">CSDN</a><br /><br /><br /><br />
    <a href="http://www.51job.com">51Job</a><br /><br /><br /><br />
    <a href="http://www.51aspx.com">51aspx</a><br /><br /><br /><br />
    </div>
</body>
</html>

==========产生提示效果并且在弹出的层中进行操作=========

            $("#toolDiv a").mouseover(function (e) {
                // 鼠标停在上面时发生添加层
                var pX = e.pageX;
                var pY = e.pageY;
                var $div = $("<div id='toolTips'>要想查看更多请点击   <span id='closeDiv' style='font-size:10px;color:red;cursor:pointer;'>关闭</span><br /><a href='http://www.baidu.com'>了解更多</a></div>").attr("class", "Tips").css({ "top": pY, "left": pX });

// 判断是否已经添加
if ($("#toolTips").length > 0) {

                } else {
                    $("body").append($div);
                };

                // 关闭DIV
                $("#closeDiv").click(function () {
                    var $div = $("#toolTips");
                    $div.remove();
                });

});

        });
    </script>
</head>
<body>
    <div id="toolDiv">
    <a href="http://www.baidu.com" >baidu</a><br /><br /><br /><br />
    <a href="http://www.nj.com">sina</a><br /><br /><br /><br />
    <a href="http://www.csdn.net">CSDN</a><br /><br /><br /><br />
    <a href="http://www.51job.com">51Job</a><br /><br /><br /><br />
    <a href="http://www.51aspx.com">51aspx</a><br /><br /><br /><br />
    </div>
</body>
</html>