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>

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

Javascript 相关文章推荐
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
JsRender for object语法简介
2014/10/31 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python 自定义对象的打印方法
2019/01/12 Python
用python写测试数据文件过程解析
2019/09/25 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
初中同学聚会邀请函
2014/02/03 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
模特大赛策划方案
2014/05/28 职场文书
计算机专业求职信
2014/06/02 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
python获取字符串中的email
2022/03/31 Python