react实现鼠标跟随事件

最新推荐文章于 2024-10-01 20:12:28 发布

墨·殇

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量313

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/freedms/article/details/132871212

版权

import { useState } from 'react';

export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  });
  return (
    <div
      onPointerMove={e => {
        setPosition({
          x: e.clientX,
          y: e.clientY
        });
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}>
      <div style={{
        position: 'absolute',
        backgroundColor: 'red',
        borderRadius: '50%',
        transform: `translate(${position.x}px, ${position.y}px)`,
        left: -10,
        top: -10,
        width: 20,
        height: 20,
      }} />
    </div>
  )
}