js--点击跟随鼠标_js点击后跟着鼠标-CSDN博客

本文链接：https://blog.csdn.net/liuyi0604/article/details/81353018

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #image{
            width: 88px;
            position: absolute;  /*必须定位,才可以动*/
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <img src="images/img.jpg" alt="" id="image">
</body>
</html>
<script>
    // document.onclick = function(event){
    //     // console.log(window.event.clientX);//window解决兼容问题
    //     var event = event || window.event;  //兼容性写法
    //     console.log(event.clientX);
    // }
    var image = document.getElementById("image");
    document.onclick =function(event){
        var event = event || window.event;
        targetX =event.clientX-image.offsetWidth/2;
        targetY =event.clientY-image.offsetHeight/2;
    }   

    //缓动
    var leaderX =0;
    var leaderY =0;
    var targetX =0;
    var targetY =0;
  
    setInterval(function(){
        leaderX = leaderX+(targetX -leaderX) /10;
        leaderY = leaderY+(targetY -leaderY) /10;
        image.style.left =leaderX +"px";
        image.style.top =leaderY +"px";
    },10)

   
</script>