点击跟随鼠标 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pic{
            width:50px;
            height:50px;
            position:absolute;  /*要定位，否则style.left没办法用*/
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<img src="img.jpg" alt="" id="pic">
</body>
</html>
<script>
        document.onclick=function(event)
        {
            var event=event || window.event;
            targetX=event.clientX-pic.offsetWidth/2; //减去盒子宽度和高度，最终鼠标光标可以定位到图片正中间
            targetY=event.clientY-pic.offsetHeight/2;
        }
        var leaderX=0;
        var targetX=0;
        var leaderY=0;
        var targetY=0;
        var pic=document.getElementById("pic");
        setInterval(fn,10);
        function fn()
        {
            leaderX=leaderX+(targetX-leaderX)/10;
            leaderY=leaderY+(targetY-leaderY)/10;
            pic.style.left=leaderX+"px";
            pic.style.top=leaderY+"px";
        }
</script>

　　

posted @ 2019-07-24 21:35  shanlu  阅读(239)  评论(0)    收藏  举报