相关CSS
.img {
position: relative;
border: 0.1px solid #000;
display: inline-block;
margin: 100px 100px
}
.img .marker {
position: absolute;
width: 10px;
height: 10px;
background: #f00;
}
相关HTML
<div id="dvs" style="width: 1477px; height: 550px; display: none;">
<div class="img" id="dv" style="margin-bottom: 0px; margin: 15px">
图片:<img id="imgs" style="width: 1438px; height: 70px" src="img.jpg"></div>
<div class="col-md-12">
<table class="table table-striped table-bordered table-hover"
id="subprocessTable"></table>
</div>
</div>
相关js
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');
console.log(x, y, '11111111')
addpoint(x, y)
//获取图片的高度和宽度
var myImg = document.querySelector("#imgs");
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
console.log("图片高度:" + currHeight);
console.log("图片宽度:" + currWidth);
ProportionWidthInImg = x / currWidth;
ProportionHeightInImg = y / currHeight;
console.log("图片比例高度:" + ProportionHeightInImg);
console.log("图片比例宽度:" + ProportionWidthInImg);
}