圆形显示鼠标单击位置

效果图
代码如下:

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>显示鼠标单击位置</title>
    <style>
      .mouse{position:fixed;background:#ffd965;width:40px;height:40px;border-radius:20px;display:none;}
    </style>
    <script>
    window.onload = function(){
      var mouse = document.getElementById('mouse');
      //需求:鼠标在页面上单击时,获取单击时的位置,并显示一个小圆点
      document.onclick = function() {
        mouse.style.display = 'block';
        // 获取事件对象的兼容处理
        var targetX = event.clientX - mouse.offsetWidth / 2;
        var targetY = event.clientY - mouse.offsetHeight / 2;
        // 在鼠标单击的位置显示<div> 
        mouse.style.left = targetX + 'px';
        mouse.style.top = targetY + 'px';
      };
    }
  </script>
  </head>
  <body>
    <div id="mouse" class="mouse"></div>
  </body>
</html>
发布了4 篇原创文章 · 获赞 4 · 访问量 125

猜你喜欢

转载自blog.csdn.net/da_yu_hai_tang/article/details/104235500