前言

小编我又来和大家啊一起分享好东西了！期待吗？

一、案例详解

这个案例好多身边的人都做过，但是那时候小编学的比较慢还没有达到制作这个效果的阶段，但是现在这个阶段小编我学到了，开始的时候呢！看到他们做出来的时候我觉得好厉害，那时候我就开始各种脑补~~

扫描二维码关注公众号，回复： 13472239 查看本文章

这个是不是很难？

这个需要的代码是不是很复杂是不是很多？

我什么时候才能学到这个地方？

结果感觉自己上当了，我做完这个时候一点成就感都没有，感觉自己那时候像个傻子。亏我还羡慕良久，结果只是自己想的太多！

好了不说多了！说多了都是泪啊！给大家看看效果吧！

实现效果：

小天使

下面是我书写的代码，我至此都没想过这个代码实现如此的简单。着实让我大吃一惊！

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="angel.gif" alt="">
    <script>
        //1.鼠标不断的移动，使用鼠标移动事件：mousemove
        //2.在页面中移动，给document注册事件
        //3.图片要移动距离，而且不占位置，我们使用绝对定位即可
        //4.核心原理：每次鼠标移动我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片了
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            //mousemove 只要为我们的鼠标移动1px就会触发这个事件
            var x = e.pageX; //获取鼠标移动的X坐标
            var y = e.pageY; //获取鼠标移动的Y坐标
            pic.style.left = x - 50 + 'px'; //把获取的X坐标给图片 注意：一定要给获取的坐标拼接单位'px'
            pic.style.top = y - 40 + 'px'; //把获取的Y坐标给图片
        })
    </script>
</body>

</html>

二、案例细节点

在这个案例中，虽然这个案例不是难度不高但是在以后确实用处还是很大的，比如购物网站中查看商品详情的时候，查看图片的时候随着鼠标走的那个放大图片的方块也是使用的这个原理。下面说说这个小案例需要注意两个小细节。

给参数添加单位
如何把鼠标放在图片中心

这是两个很小的细节问题，但是你不注意就会让你的效果无法实现。

问题一：

在我们给使用变量x，y获取我们鼠标的坐标的时候，计算机给我们返回的是一个具体的数字并不会自己给我们加上单位，所以我们在给图片赋值x，y坐标的时候我们是(pic.style.left = x + 'px';)这样书写的，就是为了给我们获取过来的坐标加上单位，让我们的图片知道该移动多少的距离。

问题二：

大家在看代码的时候看到我在给图片赋值的时候x坐标和y坐标都有减去一定的数值，其实减去数值就是为了解决我说出来的第二个问题，如何把鼠标放到图片的正中间，其实在这里减的不是鼠标的坐标位置，减的是图片移动的位置，而减去的部分就是图片的宽度和高度的一半大小。因为在不减去图片宽度和高度一半的时候鼠标是在图片的左上角。当减去图片宽度和高度的一半这样鼠标就在图片的中间位置了。如果大家不相信就可以去自己试试，换一个图片看看会不会这样的一个效果。

小编我真没想过这个案例会如此简单，还让我憧憬了好久！没想到啊！

总结

虽然这个案例是简单了点，但是还是满足了一下我这么久以来的憧憬！也算是一个满满当当的收获吧！看都看到这里了，点个赞再走吧！

一起来看看随鼠标飞翔的小天使吧

前言

一、案例详解

二、案例细节点

总结

猜你喜欢