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 Object的extend是一个常用的功能
Dec 02 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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来自动调用不同服务器上的flash
2006/10/09 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
window.open的功能全解析
2006/10/10 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
数据库笔试题
2013/05/09 面试题
一套C#面试题
2013/10/09 面试题
日语系毕业生推荐信
2013/11/11 职场文书
师范生自荐信模板
2014/05/28 职场文书
护士节活动总结
2014/08/29 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL