当前位置：文江博客话题详情

js图片上标注热点。

发布于 2022-09-02 15:02:13 字数 53 浏览 6 评论 0

如何在静态图片上用鼠标动态标注热点,类似于我鼠标点击图片上的某个区域，该区域就会有个小红点？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅冕 2022-09-09 15:02:13

@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))
})

效果

图片描述

回复收藏 0

对不⑦ 2022-09-09 15:02:13

谢谢@谦龙指正错误，的确没有考虑到当点击发生在红点上面的情况。

offsetX和offsetY是鼠标相对于目标事件的父元素的内边界在x，y坐标上的位置。
所以点击发生在红点上就为0了
那么是要采用@谦龙的办法，用e.pageX和e.pageY获取鼠标指针位置再减去父元素（图片）相对于文档的位置及半径，便可以得到圆心相对于父元素（图片）的位置了。

再用调整position:absoulute;的top和left值并新建DOM加到图片层就好了。

写了个简单的例子，可以参考下

<style type="text/css">
.wrap{
    width:300px;
    height: 200px;
    background: #ccc;
    position: relative;
}
.ball{
    width:20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
}

</style>


<body>
    <div class="wrap"></div>
    <script type="text/javascript">
    $('.wrap').click(function(e){
        var radius=10;//半径
        var offset=$(this).offset();
        var top=e.pageY-offset.top-radius+"px";
        var left=e.pageX-offset.left-radius+"px";
        $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')

    })
    </script>
 </body>

回复收藏 0