js图片上标注热点。

newdriver

15882229

发布于
2016-05-08

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

javascript css

html5 jquery jquery插件

阅读 16.1k

3 个回答

前端胖头鱼

✓ 已被采纳

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

效果

图片描述

PiLee

1.5k1110

发布于
2016-05-08

更新于
2016-05-08

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

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>

xi_yu

1.7k2814

发布于
2016-05-08

直接绑定click的事件，事件里面根据当前event的坐标点添加DOM进去，DOM的display可以是absolute，然后left top根据event的坐标点设置，手机码子，只好说思路

撰写回答