JavaScript之鼠标跟随 

<!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>
      
    <!-- <link rel="stylesheet" href="/js/NES.css">
    <link rel="stylesheet" href="/js/style.css"> -->
    <style>
        img
        {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="/img/妖狐.jpg" style="height:20px ;width:20px">
</body>
</html>
<script>
let img=document.querySelector('img');
//mousemove鼠标移动事件
document.addEventListener('mousemove',function(e)
{
//把鼠标移动的坐标赋值给图片的上边和左边的距离
   img.style.left= e.clientX-10+'px';
   img.style.top= e.clientY+'px';
});
</script>

所谓的鼠标跟随其实就是获取鼠标移动事件，再根据clientX和clientY获取鼠标的x和y坐标，赋值给图片与上边的距离和左边的距离。就可以实现图片跟随鼠标的效果了

posted @ 2022-08-09 23:23  仲夏不凉爽  阅读(301)  评论(0)    收藏  举报