JQuery图片随鼠标的移动

版权声明:转载请注明出处:http://blog.csdn.net/Guobeibei_123 https://blog.csdn.net/Guobeibei_123/article/details/80760086

图片跟随鼠标的移动

<html>
<head>
    <style type="text/css">
        #img {
            position:absolute;/*绝对位置*/
        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
           //第一种方式
            //鼠标的移动事件
            $(document).mousemove(function (e) {
                //定义一个X轴的位置
                var page_x = parseInt(e.pageX + 12) + "px";
                //定义一个Y轴的位置
                var page_y = e.pageY + "px";
                //图片的左边X轴,上部Y轴
                $("#img").css({
                    "left": page_x,
                    "top": page_y
                });
            });
          //第二种方式
           //鼠标的移动
            $(document).mousemove(function (e) {
                //position位置,absolute绝对的
                //绝对值的引用,左边X轴,上边Y轴
                $("#img").css({"position":"absolute","left":e.pageX , "top":e.pageY});
            });
        });
    </script>
</head>
<body>
    <div id="img">
        <!--图片-->
        <img src="萌萌哒.jpg" />
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/Guobeibei_123/article/details/80760086