jQuery鼠标跟随事件

最新推荐文章于 2022-08-26 16:39:37 发布

weixin_46370867

最新推荐文章于 2022-08-26 16:39:37 发布

阅读量261

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46370867/article/details/111055191

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天来看一下鼠标跟随时间，图片随着鼠标的移动而移动
大概思路：

导入一张图片，默认是不跟随的，点击图片后跟随，给图片添加点击事件
编写鼠标移动事件实现图片跟随鼠标移动
- 得到鼠标的坐标值注意：所有页面元素的定位都以左上角为准
- 获得中间的位置 (宽的一半，高的一半)
  源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随事件</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
        img {
            width: 150px;
            position: absolute;
            left: 200px;
            top: 100px;
        }
    </style>
</head>
<body>
    <img src="pic6.jpg">  
    <!-- 改变图片的left和top值 -->

    <script>
        var flag = false;  // 默认不跟随
        $('img').bind('click',function(){  // 点击图片后跟随
            if (flag) {
                flag = false;
            } else {
                flag = true;
            }
        });

        // mousemove()鼠标移动事件 
        $("html").bind("mousemove",function(evet){
            console.log("this is mousemove");
            if (flag) {
                // 图片跟随鼠标移动
                // 得到鼠标的坐标值 【所有页面元素的定位都以左上角为准】
                var x = event.clientX;
                var y = event.clientY;

                // 所有页面元素的定位都以左上角为准,得到图片宽/高的一半就可以获得中间的位置
                var width = parseInt($("img").css("width"));
                var height = parseInt($("img").css("height"));

                console.log(width,height);

                $("img").css({
                    top: (y - height/2) + 'px',
                    left:(x - width/2) + 'px'
                });
            }
            
        });
    </script>
</body>
</html>

weixin_46370867

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery鼠标跟随事件

今天来看一下鼠标跟随时间，图片随着鼠标的移动而移动大概思路：导入一张图片，默认是不跟随的，点击图片后跟随，给图片添加点击事件编写鼠标移动事件实现图片跟随鼠标移动得到鼠标的坐标值注意：所有页面元素的定位都以左上角为准获得中间的位置 (宽的一半，高的一半)源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v
复制链接

扫一扫

专栏目录