javascript - js图片上标注热点。
本文介绍了javascript - js图片上标注热点。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如何在静态图片上用鼠标动态标注热点,类似于我鼠标点击图片上的某个区域,该区域就会有个小红点?
解决方案
@PiLee 嗨 你好,当设置热点的时候,点击的位置是在className为ball的区域时候,是有问题的,如下图。
本质上是没有正确的获取问题中所需要的鼠标位置坐标
问题中所需要的鼠标位置应该是相对于热点图的位置,而e.offsetX
, e.offsetY
则是鼠标相对于当前点击元素的位置关系。
预览 因为图片链接的是百度下的,可能不能正常显示
html
<div class="wrap">
<img src="http://b.hiphotos.baidu.com/image/pic/item/faedab64034f78f0dee066337d310a55b2191c02.jpg" alt="">
</div>
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;
$('<span class="red-ball">').css({
left: x - radius,
top: y - radius,
width: w,
height: h
}).appendTo(this);
}
}
$('.wrap').on('click', setRedBall(20))
})
效果
这篇关于javascript - js图片上标注热点。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文