• js鼠标点击添加图标并获取图标的坐标值

    给这个图片添加摄像头图标，并获取图标的坐标值，也就是图标的css样式是positon:absolute,获取left和top的值。

    图片1

    思路是这样的，获取这里的长度， 

    图片2

     1.鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标

    1. let x = e.clientX;
    2. let y = e.clientY;

    2.图片距浏览器顶部的距离

    1. let imgTop = $('.imageBox img').offset().top;
    2. let imgLeft = $('.imageBox img').offset().left;

    3.就能获取到图片2中箭头的距离，即鼠标点击的位置距背景图顶部的距离

    1. let cursorTop = y - imgTop;
    2. let cursorLeft = x - imgLeft;

    4.计算得出图标的left和top值，这里是%。

    1. let width = $('.imageBox img').width();
    2. let height = $('.imageBox img').height();
    3. let left = (cursorLeft/width*100).toFixed(2)
    4. let top = (cursorTop/height*100).toFixed(2)

    5.效果如下图，但是鼠标点击处是图标的左上角，感觉好像是差一点

    6.应该让鼠标点击处是图标的中心，就需要获取图标中心的坐标，然后 减去图片2中箭头的距离。

    1. //设置添加的小图标的center为中心点
    2. let  pointLeft = $('.imageBox .block').width()*0.5;
    3. let  pointTop = $('.imageBox .block').height()*0.5;
    4.  
    5. //鼠标点击无差距
    6. let xData = cursorLeft - pointLeft;
    7. let yData = cursorTop - pointTop;

    7. 完整代码如下

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 		.imageBox{
    8. 			width: 800px;
    9. 			position: relative;
    10. 			overflow: hidden;
    11. 			margin: 5% 2%;
    12. 		}
    13. 		.imageBox img{
    14. 			width: 100%;
    15. 			height: 100%;
    16. 		}
    17. 		.imageBox .block{
    18. 			width: 3%;
    19. 			height: 4%;
    20. 			background: url(camera.png) 0 0 no-repeat;
    21. 			background-size: 100% 100%;
    22. 			position: absolute;
    23. 			
    24. 		}
    25. 		</style>
    26. 	</head>
    27. 	<body>
    28. 		<div class="page">
    29. 			<div class="imageBox">
    30. 				<img src="https://img0.baidu.com/it/u=3593454291,2854711423&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" >
    31. 				<div class="block">
    32.  
    33. 				</div>
    34. 			</div>
    35. 		</div>
    36. 		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    37. 		<script type="text/javascript">
    38. 			$('.imageBox').click(function(e){
    39. 				//鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标
    40. 				let x = e.clientX;
    41. 				let y = e.clientY;
    42.  
    43. 				//图片的宽高
    44. 				let width = $('.imageBox img').width();
    45. 				let height = $('.imageBox img').height();
    46.  
    47. 				//图片距浏览器顶部的距离
    48. 				let imgTop = $('.imageBox img').offset().top;
    49. 				let imgLeft = $('.imageBox img').offset().left;
    50.  
    51. 				//鼠标点击的位置距背景图顶部的距离
    52. 				let cursorTop = y - imgTop;
    53. 				let cursorLeft = x - imgLeft;
    54.  
    55. 				//设置添加的小图标的center为中心点
    56. 				let  pointLeft = $('.imageBox .block').width()*0.5;
    57. 				let  pointTop = $('.imageBox .block').height()*0.5;
    58.  
    59. 				//鼠标点击无差距
    60. 				let xData = cursorLeft - pointLeft;
    61. 				let yData = cursorTop - pointTop;
    62.  
    63.  
    64. 				let left = (xData/width*100).toFixed(2)
    65. 				let top = (yData/height*100).toFixed(2)
    66. 				console.log(x);
    67. 				console.log(y);
    68. 				// let html = `<div class="block" style="top: ${top}%;left: ${left}%;"></div>`
    69. 				// $('.imageBox').append(html);
    70. 				$('.imageBox .block').css({'top':top+'%'})
    71. 				$('.imageBox .block').css({'left':left+'%'})
    72.  
    73. 			})
    74. 		</script>
    75. 	</body>
    76. </html>

  • 相关阅读:
    6 java的基本数据类型和引用数据类型和基本数据类型的对象
    【算法训练-二分查找 四】【模拟二分】X的平方根
    leetcode 阶乘尾数
    Rust中的并发性：Sync 和 Send Traits
    基于xsh的vbs脚本的使用（语法）
    鲸探发布点评：9月19日发售《中国大飞机C919》数字藏品
    Kali Linux基础篇(一) 信息收集
    CTF-栈溢出-基本ROP-【ret2syscall】
    致远OA wpsAssistServlet 任意文件上传漏洞
    高新技术企业领域划分
  • 原文地址：https://blog.csdn.net/weixin_51609337/article/details/133945426