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中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
详解JavaScript的BUG和错误
May 07 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
详解django2中关于时间处理策略
2019/03/06 Python
详解python的四种内置数据结构
2019/03/19 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
光盘行动倡议书
2014/02/02 职场文书
股权转让意向书
2014/04/01 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2014最新离职证明范本
2014/09/12 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
golang的文件创建及读写操作
2022/04/14 Golang