JS鼠标跟随效果

最新推荐文章于 2024-11-14 14:55:48 发布

wxk_前端开发

最新推荐文章于 2024-11-14 14:55:48 发布

阅读量978

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37058714/article/details/81084828

本文介绍了如何使用JavaScript实现鼠标点击后图片跟随鼠标移动的效果。通过监听鼠标点击事件，获取鼠标坐标，然后设置图片的位置，从而达到图片跟随的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果实现分析：

第一步：这是一个鼠标点击事件，当鼠标点击屏幕的任何位置时，图片会跟随着移动，此时要获取鼠标点击某个位置的坐标，用 event 对象来获取，首先获取X轴方向的某个值：var eX=event.clientX;再获取Y轴方向的某个值，var eY=event.clientY;

第二步：获取图片随之移动的位置

第三步：代码实现

<body>
    <img src="images/img.gif" alt="" id='img'>
    <script>
    var headerX=0;
    var targetX=0;
    var headerY=0;
    var targetY=0;
    document.onclick=function(event){
        //先获取鼠标点击屏幕的坐标
        var  eX=event.clientX;
        var eY=event.clientY;