一、通过JS获取鼠标点击时图片的相对坐标位置
源代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap{ width:300px; height: 200px; background: #ccc; position: relative; } .ball{ width:20px; height: 20px; background: red; border-radius: 50%; position: absolute; } .box { width: 400px; height: 400px; overflow: auto; } </style> </head> <body> <div class="box"> <div class="wrap"> <img src="images/test.jpg" alt=""> <div class="container"></div> </div> </div> <script src="js/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $('.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"; //$('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>'); $('.container').html('<div class="ball" style="top:'+top+';left:'+left+'"></div>'); alert(top+"_"+left); }) </script> </body> </html>