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屋！