说明
用户在图片上标记某个点，注意是相对于该图片的绝对位置，
即使是在浏览器页面窗口大小的改变的情况下，该标记点相对于图片的位置也不会改变。（jquery.ipicture.js做不到该功能）
将标记点位置保存到数据库，下次能在图片相应位置展示出来。
本demo中的css是用scss写的，注意变通。
html代码
<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"/>
</head>
<body>
<div class="wrap">
<img src="http://files.wmxa.cn/j1/190504/233AG130-6.bmy" alt="刘亦菲">
<!--图片是网络图片，可替换成其他图片-->
</div>
</body>
</html>
css 注意是用scss语法实现的！！
直接引用scss样式是不能实现样式效果的。
/* scss样式文件 */
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.wrap{
display: inline-block;
position: relative;
box-shadow: 0 0 4px #C79F5A;
span{
display: inline-block;
}
span.red-ball{
position: absolute;
background-color: #EF6191;
opacity: .7;
border-radius: 100%;
transition: .4s;
&:hover{
opacity: 1;
}
}
}
css样式文件
将上面的scss代码转换成css样式代码，如下：
该css样式可以直接在html中使用，并能正常显示效果
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.wrap {
display: inline-block;
position: relative;
box-shadow: 0 0 4px #C79F5A;
}
.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;
}
js代码
$(function () {
alert("注意该demo的样式是用SCSS实现的！！！");
function setRedBall(r) {
var $wrap = $('.wrap');
var radius = r;
var w = radius * 2;
var h = radius * 2;
var x, y, offset;
return function (e) {
offset = $(this).offset();
x = e.pageX - offset.left;
y = e.pageY - offset.top;
$('<span class="red-ball">').css({
left: x - radius,
top: y - radius,
width: w,
height: h
}).appendTo(this);
alert("弹窗展示鼠标点击在图片的位置");
alert("x:"+x);
alert("y:"+y);
alert("利用css显示样式，或者存入数据库");
}
}
$('.wrap').on('click', setRedBall(20));
})
改进例子
图片会随着页面的不同，图片大小也不同。这是要经过相对于图片的比例来转换。实现标记点不随图片大小的改动而造成位置偏移。
演示例子
注意图片的x，y。
<html lang="en">
<head>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<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;margin:100px 100px}
.img .marker{position:absolute;width:20px;height:20px;background:#f00;}
</style>
</head>
<body>
<p>点击第1个刘亦菲</p>
<div class="img" id="dv">
<img id="LiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg"></div>
<p>在第2个小刘亦菲上做点标记</p>
<div class="img" id="dv2">
<img id="SmallLiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg" width="300px" height="400px"></div>
</body>
</html>
<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("#LiuYiFeiImg");
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("#SmallLiuYiFeiImg");
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>
</html>