现在可以实现给图片做标记了，但是定位存在问题，就是当图片很大的时候，拖动滚动条后点击鼠标做的标记位置不对了。可能是代码里用来获取位置的方法不对，但是对定位这块不太熟，特地注册来请教大神。我贴上代码，请大神帮忙看看如何解决。谢谢！
图片和js我引用的外部地址，代码应该可以直接运行。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>无标题 2</title>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bodyheight = $(window).height();
var bodywidth = $(window).width()-200;
$(".imgmakerright>div").css("width",bodywidth);
$(".imgmakerright>div").css("height",bodyheight);
$(".dtreebox").css("height", bodyheight);
});
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow:hidden;
text-align: center;
}
.imgmakerright {
position: relative;
}
button {
display: inline-block;
border: 0;
}
button.red-ball {
position: absolute;
background-color: #000;
padding: 5px;
border-radius: 5px;
transition: .4s;
color: #fff;
box-shadow: 0 0 20px rgba(60,140,255,.5);
}
button.red-ball:after
{
font:normal normal normal 24px/1 FontAwesome;
content:"\f124";
position:absolute;
left:-6px;
top:-8px;
color:#3b8cff;
text-shadow:0 0 20px rgba(60,140,255,.5);
transform:rotate(-90deg)
}
button.red-ball > i {
font-weight: normal;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.2);
text-align: left;
display: inline-block;
box-sizing: border-box;
padding-left: 3px;
width: 16px;
line-height: 16px;
height: 16px;
font-size: 12px;
font-style: normal;
vertical-align: middle;
margin-top: -4px;
margin-left: 3px;
cursor: pointer;
transition: all .3s;
}
button.red-ball > i:hover {
background-color: #e71111;
}
.imgmakerleft button {
display: inline-block;
border-radius: 3px;
margin: auto;
height: 30px;
width: 80px;
background-color: #eee;
margin-top: 5px;
}
.imgmakerleft button.active {
background-color: #3b8cff;
color: #fff;
}
.imgmaker {
display: table;
width: 100%;
table-layout: fixed;
}
.imgmaker > div {
display: table-cell;
vertical-align: top;
}
.imgmakerleft {
width: 200px;
font-size: 0;
text-align: center;
}
.imgmakerleft button {
font-size: 14px;
}
* {
outline: none;
font-family: 微软雅黑;
}
.imgmakerright > div {
overflow: auto;
position: relative;
}
.imgmakerright > div > img {
position: absolute;
left: 0;
top: 0;
}
.dtreebox
{
overflow:auto
}
</style>
<script type="text/javascript">
$(function () {
$(".imgmakerleft>button").click(
function aa() {
$(".imgmakerleft>button").removeClass("active");
$(this).addClass("active")
}
);
function setRedBall(r) {
var $wrap = $('.imgmakerright>div');
var radius = r;
var x, y, offset;
return function (e) {
var mytxt=$("button.active").text();
offset = $(this).offset();
x = e.pageX - offset.left;
y = e.pageY - offset.top;
$('<button class="red-ball"></button>').text(mytxt).append("<i class='close'>×</i>").css({
left: x - radius,
top: y - radius,
}).appendTo(this); $(".red-ball").click(function(event){
event.stopPropagation();
});
$(".close").click(function(event){
event.stopPropagation();
$(this).parent().hide();
});
}
}
$('.imgmakerright>div').on('click', setRedBall(0));
})
</script>
</head>
<body>
<div class="imgmaker">
<div class="imgmakerleft">
<button name="Abutton1">优秀</button>
<button class="active" name="Abutton1">良好</button>
<button name="Abutton1">一般</button><button name="Abutton1">很差</button>
</div>
<div class="imgmakerright">
<div><img alt="" src="http://img18.3lian.com/d/file/201709/23/f7c0def8f522af91da820bcef38584c9.jpg" ></div> </div>
</div>
</body>
</html>
