您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。