jquery div 跟随鼠标移动

最新推荐文章于 2023-05-17 14:43:36 发布

一航jason

最新推荐文章于 2023-05-17 14:43:36 发布

阅读量5.3k

点赞数 1

分类专栏： html5/css3/JavaScript 前端开发文章标签： jquery

html5/css3/JavaScript 前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>
    <title></title>
<!--    属性：pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键（1左键，2中键，3右键）。
    altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。
    keyCode、charCode属性发生时间时的keyCode、charCode。
    <script type="text/javascript">
        $("a").click(function (e) {
            var target = $(e.target);
            alert(target.attr("href"));
            e.preventDefault();
        });
    </script>
    $(":button").mouseup(function(e) {
                if (e.ctrlKey && e.which == 3) {
                    alert("按下ctrl和鼠标右键！");
                }
            });-->
    <style type="text/css">
        #divMouse{position:absolute;width:80px;height:80px;background-color:gold;display:none;}            
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {
                var xPos = parseInt(e.pageX+12) + "px";
                var yPos = e.pageY + "px";
                $("#divMouse").css("left", xPos).css("display","block");
                $("#divMouse").css("top", yPos);
            });
        });
    </script>
</head>
<body>
    <div id="divMouse">
        跟着鼠标走
    </div>
</body>
</html>

一航jason

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery div 跟随鼠标移动

<!-- 属性：pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键（1左键，2中键，3右键）。 altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。 keyCode、charCode属性发生时间时的keyCode、charCode。 $("a").click(fu
复制链接

扫一扫