<!DOCTYPE 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>
<style>
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: .7;
border-radius: 100%;
transition: .4s;
}
.wrap:hover{
opacity: 1;
}
</style>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="wrap">
<img src="http://files.wmxa.cn/j1/190504/233AG130-6.bmy" alt="刘亦菲">
</div>
</body>
<script>
$(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);
console.log("弹窗展示鼠标点击在图片的位置");
console.log("x:"+x);
console.log("y:"+y);
console.log("利用css显示样式，或者存入数据库");
}
}
$('.wrap').on('click', setRedBall(5));
})
</script>
</html>
