当前位置：网站首页>special effects - 鼠标点击，自定义 DOM 跟随移动

special effects - 鼠标点击，自定义 DOM 跟随移动

2022-07-24 05:17:00 【Jie_1997】

鼠标点击，自定义 DOM 跟随移动

一. 效果图
二. 实现代码

一. 效果图

在这里插入图片描述

二. 实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标点击，自定义 DOM 跟随移动</title>
    <style> * {
       margin: 0; padding: 0; } html {
       background-color: #c3ecff; } #box img {
       width: 100px; height: 100px; position: absolute; top: 0; left: 0; } </style>
</head>

<body>
    <div id="box">
        <!-- 相对位置 -->
        <img src="./img.gif" alt="" />
    </div>
</body>
<script> //点击移动的dom var dom = document.getElementById('box').children[0]; document.onclick = function (event) {
       var event = event || window.event; // console.log(event.clientX,event.clientY); targetX = event.clientX - dom.offsetWidth / 2; targetY = event.clientY - dom.offsetHeight / 2; //防止物体部分在可视区域外,目前仅针对左上，右下未解决 if (targetX <= dom.offsetWidth / 2) {
       targetX = 0; } if (targetY <= dom.offsetHeight / 2) {
       targetY = 0; } } //减速运动 var leaderX = 0, leaderY = 0, targetX = 0, targetY = 0; setInterval(function () {
       leaderX = leaderX + (targetX - leaderX) / 10; leaderY = leaderY + (targetY - leaderY) / 10; dom.style.top = leaderY + 'px'; dom.style.left = leaderX + 'px'; }, 10); </script>

</html>