编程 Javascript

js实现圆形显示鼠标单击位置

Posted in Javascript onFebruary 11, 2020

本文实例为大家分享了js实现圆形显示鼠标单击位置的具体代码，供大家参考，具体内容如下

js实现圆形显示鼠标单击位置

代码如下：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现圆形显示鼠标单击位置

- Author -

da_yu_hai_tang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

菜单效果

Oct 14 Javascript

Javascript优化技巧（文件瘦身篇）

Jan 28 Javascript

input、button的不同type值在ajax提交表单时导致的陷阱

Feb 24 Javascript

jquery入门—访问DOM对象方法

Jan 07 Javascript

JQuery中的html()、text()、val()区别示例介绍

Sep 01 Javascript

JsRender for object语法简介

Oct 31 Javascript

jQuery使用getJSON方法获取json数据完整示例

Sep 13 Javascript

jquery日历插件e-calendar升级版

Nov 10 Javascript

微信小程序开发一键登录获取session_key和openid实例

Nov 23 Javascript

vue-cli构建项目使用 less的方法

Oct 04 Javascript

JS基础之逻辑结构与循环操作示例

Jan 19 Javascript

node.js使用 http-proxy 创建代理服务器操作示例

Feb 10 Javascript

JavaScript实现省份城市的三级联动

Feb 11 #Javascript

node.js使用yargs处理命令行参数操作示例

Feb 11 #Javascript

node.js实现http服务器与浏览器之间的内容缓存操作示例

Feb 11 #Javascript

node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例

Feb 11 #Javascript

JavaScript实现拖拽功能

Feb 11 #Javascript

node.js中 mysql 增删改查操作及async，await处理实例分析

Feb 11 #Javascript

基于Angular 8和Bootstrap 4实现动态主题切换的示例代码

Feb 11 #Javascript