首页技术文章正文

鼠标点击图片跟着动如何通过JS实现？

更新时间:2021年10月27日10时35分来源:传智教育浏览次数:

鼠标点击图片跟着动的实现原理：

通过event.clientX和event.clilentY获取鼠标位置，然后将鼠标的X轴值和Y轴的值分别赋值给绝定位（absolute）的图片的left值和top值。

下面我们通过代码具体来实现：

<!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>鼠标点击图片跟随鼠标移动效果-黑马程序员web前端培训高手班http://web.itheima.com</title>
    <style>
        img {
            /* 通过修改图片的top值和left值实现图片移动，所以图片需要绝对定位 */
            position: absolute;
            width: 200px;
        }
    </style>
</head>
<body>
    <img src="http://www.itheima.com/images/logo.png" id="ke" class="img_ke">
</body>
<script>
    // 定义im为需要点击的图片对象，通过getElementsByTagName()找到元素
    var im = document.getElementsByTagName('img')[0];
    // 给im对象绑定点击事件
    im.onclick = function () {
        // 鼠标可以在整个页面移动，所以给documet绑定鼠标移动事件
        document.onmousemove = function(e){
            // 通过event.clientX和event.clilentY获取鼠标位置
            // 将鼠标的x轴值和Y轴值赋值给图片的left和top
            im.style.left = e.clientX+'px';
            im.style.top = e.clientY+'px';
        }
    }
</script>
</html>

动图展示最终效果：

图片随鼠标移动效果