一、通过JS获取鼠标点击时图片的相对坐标位置
源代码如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>通过JS获取图片的相对坐标位置</title> 7 8 <style> 9 body {margin: 0; padding: 0; } 10 #area{width:300px;height:300px;} 11 #area img{border:none;cursor:pointer;width: 300px;height: 300px;} 12 .testBox { 13 width: 200px; 14 height: 200px; 15 overflow: auto; 16 } 17 </style> 18 </head> 19 20 <body id=""> 21 <h3>通过JS获取图片的相对坐标位置 示例</h3> 22 <div class="testBox"> 23 <div id="area" onclick="getClickPos(event);"> 24 <img id='imageID' src="images/1.jpg"> 25 </div> 26 </div> 27 28 29 <script type="text/javascript"> 30 function getClickPos(e){ 31 var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft; 32 var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop; 33 identifyImage = document.getElementById("imageID"); 34 img_x = locationLeft(identifyImage); 35 img_y = locationTop(identifyImage); 36 var xPos = xPage-img_x; 37 var yPos = yPage-img_y; 38 alert('X : ' + xPos + ' ' + 'Y : ' + yPos); 39 } 40 //找到元素的屏幕位置 41 function locationLeft(element){ 42 offsetTotal = element.offsetLeft; 43 scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords 44 if (element.tagName != "BODY"){ 45 if (element.offsetParent != null) 46 return offsetTotal+scrollTotal+locationLeft(element.offsetParent); 47 } 48 return offsetTotal+scrollTotal; 49 } 50 //find the screen location of an element 51 function locationTop(element){ 52 offsetTotal = element.offsetTop; 53 scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords 54 if (element.tagName != "BODY"){ 55 if (element.offsetParent != null) 56 return offsetTotal+scrollTotal+locationTop(element.offsetParent); 57 } 58 return offsetTotal+scrollTotal; 59 } 60 </script> 61 </body>
补充
二、js图片上标注热点（相对定位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.wrap{
200px;
height: 200px;
overflow: auto;
background: #ccc;
position: relative;
}
.ball{
20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<img src="images/1.jpg" alt="">
</div>
<script>
$('.wrap').click(function(e){
var radius=10;//半径
var offset=$(this).offset();
var top=e.pageY-offset.top-radius+"px";
var left=e.pageX-offset.left-radius+"px";
console.log(top);
console.log(left);
$('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
})
</script>
</body>
</html>