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计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
Three.js学习之网格
Aug 10 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 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使用json_encode对变量json编码
2014/04/07 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
js 代码优化点滴记录
2012/02/19 Javascript
Seajs的学习笔记
2014/03/04 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
党员批评与自我批评(5篇)
2014/09/23 职场文书
2014教师年度工作总结
2014/11/10 职场文书
高中教师个人工作总结
2015/02/10 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
运动会通讯稿100字
2015/07/20 职场文书
小学校本教研总结
2015/08/13 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android