图片热点标注html,js图片上标注热点。

@PiLee 嗨 你好，当设置热点的时候，点击的位置是在className为ball的区域时候，是有问题的，如下图。

本质上是没有正确的获取问题中所需要的鼠标位置坐标

问题中所需要的鼠标位置应该是相对于热点图的位置，而e.offsetX, e.offsetY则是鼠标相对于当前点击元素的位置关系。

预览 因为图片链接的是百度下的，可能不能正常显示

html

sass

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;

}

}

}

js

$(function () {

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;

$('').css({

left: x - radius,

top: y - radius,

width: w,

height: h

}).appendTo(this);

}

}

$('.wrap').on('click', setRedBall(20))

})

效果