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 相关文章推荐
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
JS监听Esc 键触发事键
Apr 14 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python实现自动解数独小程序
2019/01/21 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
PHP开发的一般流程
2013/08/13 面试题
应聘医药销售自荐书范文
2014/02/08 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
一年级学生期末评语
2014/04/21 职场文书
搞笑车尾标语
2014/06/23 职场文书
地球一小时宣传标语
2014/06/24 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
php引用传递
2021/04/01 PHP
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Python爬虫基础讲解之请求
2021/05/13 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android