17.鼠标跟随效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        img{
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $(document).on("mousemove", function (e) {
                var width=$("img").width();
                var height=$("img").height();
                //方法一
//                $("img").offset({
//                    "top": e.pageY-height/2,
//                    "left": e.pageX-width/2
//                })

                //方法二
                $("img").css({
                    "top": e.pageY-height/2,
                    "left": e.pageX-width/2
                })
            })
        })
    </script>
</head>
<body>
<img src="ts.gif" alt=""/>
</body>
</html>

posted on 2018-10-02 23:02 xxcxxc 阅读(107) 评论(0) 编辑收藏举报