通过js实现在图片上打点，以下按jquery方式和js的方式实现，支持按容器比例定位标记点。
方式一jquery：
<html lang="en"> <head> <meta charset="UTF-8"> <title>测试图片打点</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; } .wrap { width: 78%; left: 21%; border: 1px solid; position: relative; overflow-y: auto; overflow-x: auto; } .wrap span { display: inline-block; } .wrap span.red-ball { position: absolute; background-color: #EF6191; opacity: 0.7; border-radius: 100%; transition: 0.4s; } .wrap span.red-ball:hover { opacity: 1; cursor: crosshair; } .datatree { position: absolute; left: 0px; top: 0px; width: 20%; border: 1px solid; } </style> </head> <body> <div class="wrap"> <img src="/img/device/pmt.jpg"> </div> </body> </html> <script type="text/javascript"> 2 $(function () { 3 var ProWidthInImg = 0.3983202475944492;//鼠标所选位置相对于所选图片宽度的比例 4 var ProHeightInImg = 0.4090909090909091; //鼠标所选位置相对于所选图片高度的比例 5 //获取图片的高度和宽度 6 var myImg = $('.wrap'); 7 var currWidth = myImg.width(); 8 var currHeight = myImg.height(); 9 10 //打点示例 11 var left = currWidth * ProWidthInImg; 12 var top = currHeight * ProHeightInImg; 13 myImg.append('<span id="123456" onclick="lookinfo(this)" class="red-ball" style="left:' + left + 'px;top:' + top + 'px;20px;height:20px"></span>'); 14 15 function setMarker(r) { 16 var radius = r; 17 var w = radius * 2; 18 var h = radius * 2; 19 var x, y, offset; 20 21 return function (e) { 22 offset = $(this).offset(); 23 x = e.pageX - offset.left; 24 y = e.pageY - offset.top; 25 ProWidthInImg = x / currWidth; 26 ProHeightInImg = y / currHeight; 27 //alert(ProWidthInImg + ":" + ProHeightInImg); 28 $('<span onclick="lookinfo(this)" class="red-ball">').css({ 29 left: x, 30 top: y, 31 w, 32 height: h 33 }).appendTo(this);35 } 36 } 37 $('.wrap').on('click', setMarker(10)); 38 }); 39 function lookinfo(obj) { 40 stopBubble(obj.event); 41 alert($(obj).attr("style")) 42 } 43 function stopBubble(e) { 44 if (e && e.stopPropagation) 45 e.stopPropagation(); 46 else 47 window.event.cancelBubble = true; 48 } 49 </script>
方式二：js
<html lang="en"> <head> <meta charset="UTF-8"> <title>测试图片打点</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> .img { position: relative; border: solid 1px #000; display: inline-block; } .img .marker { position: absolute; width: 20px; height: 20px; background: #f00; } </style> </head> <body> <div> <p>点击第1张大图</p> <div class="img" id="dv"> <img id="bigImg" src="/img/home/bg_defaultpage.jpg" width="800px" height="600px"> </div> </div> <div> <p>在第2张小图上做点标记</p> <div class="img" id="dv2"> <img id="smallImg" src="/img/home/bg_defaultpage.jpg" width="500px" height="300px"> </div> </div> </body> </html> <script src="~/lib/jquery/dist/jquery.js"></script> <script type="text/javascript"> var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例 var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例 function createMarker(x, y, divName) { var div = document.createElement('div'); div.className = 'marker'; div.style.left = x + 'px'; div.style.top = y + 'px'; document.getElementById(divName).appendChild(div) } document.getElementById('dv').onclick = function (e) { e = e || window.event; var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY; createMarker(x, y, 'dv'); //获取图片的高度和宽度 var myImg = document.querySelector("#bigImg"); var currWidth = myImg.clientWidth; var currHeight = myImg.clientHeight; // alert("图片高度："+currHeight); // alert("图片宽度："+currWidth); ProportionWidthInImg = x / currWidth; ProportionHeightInImg = y / currHeight; // alert("图片比例高度："+ProportionHeightInImg); // alert("图片比例宽度："+ProportionWidthInImg); MarkSmallImg(); } function MarkSmallImg() { var myImg = document.querySelector("#smallImg"); var currWidth = myImg.clientWidth; var currHeight = myImg.clientHeight; // alert("图片高度："+currHeight); // alert("图片宽度："+currWidth); //给第二个刘亦菲加标记点 var x = currWidth * ProportionWidthInImg; var y = currHeight * ProportionHeightInImg; createMarker(x, y, 'dv2'); } </script>