javascript - js图片上标注热点。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - js图片上标注热点。

PHPz 2017-04-11 10:08:06

[JavaScript讨论组]

823

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

PHPz

学习是最好的投资！

全部回复(2)

黄舟2017-04-11 10:10:06 2楼

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

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>
    <p class="wrap"></p>
    <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('<p class="ball" style="top:'+top+';left:'+left+'"></p>')

    })
    </script>
 </body>