用户在图片上点选并标记位置，js实现

最新推荐文章于 2024-05-24 14:15:29 发布

长安山南君

最新推荐文章于 2024-05-24 14:15:29 发布

阅读量1.3w

点赞数 12

分类专栏： Web前端文章标签： js图片标记

本文链接：https://blog.csdn.net/weixin_42727550/article/details/89878685

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

说明

用户在图片上标记某个点，注意是相对于该图片的绝对位置，
即使是在浏览器页面窗口大小的改变的情况下，该标记点相对于图片的位置也不会改变。（jquery.ipicture.js做不到该功能）
将标记点位置保存到数据库，下次能在图片相应位置展示出来。
本demo中的css是用scss写的，注意变通。

演示链接

html代码

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片热点问题</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
  <div class="wrap">
    <img src="http://files.wmxa.cn/j1/190504/233AG130-6.bmy" alt="刘亦菲">
    <!--图片是网络图片，可替换成其他图片-->
  </div>
</body>
</html>

css 注意是用scss语法实现的！！

直接引用scss样式是不能实现样式效果的。

/* scss样式文件 */
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;
    }
  }
}

css样式文件

将上面的scss代码转换成css样式代码，如下：
该css样式可以直接在html中使用，并能正常显示效果

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;
}
.wrap span {
  display: inline-block;
}
.wrap span.red-ball {
  position: absolute;
  background-color: #EF6191;
  opacity: 0.7;
  border-radius: 100%;
  transition: 0.4s;
}
.wrap span.red-ball:hover {
  opacity: 1;
}

js代码

$(function () {
 alert("注意该demo的样式是用SCSS实现的！！！");
      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);          
          
          alert("弹窗展示鼠标点击在图片的位置");
          alert("x:"+x);
          alert("y:"+y);
          alert("利用css显示样式，或者存入数据库");
        }
       
      }

      $('.wrap').on('click', setRedBall(20));
 
    })

改进例子

图片会随着页面的不同，图片大小也不同。这是要经过相对于图片的比例来转换。实现标记点不随图片大小的改动而造成位置偏移。

演示例子
注意图片的x，y。
在这里插入图片描述

<html lang="en">
<head>
	
	<script type="text/javascript" src="js/jquery.min.js" ></script>
  <meta charset="UTF-8">
  <title>图片热点问题</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

 <style>
    .img{position:relative;border:solid 1px #000;display:inline-block;margin:100px 100px}
    .img .marker{position:absolute;width:20px;height:20px;background:#f00;}
</style>

</head>
<body>
 
  <p>点击第1个刘亦菲</p> 
<div class="img" id="dv">
    <img  id="LiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg"></div>
    
    <p>在第2个小刘亦菲上做点标记</p> 
<div class="img" id="dv2">
    <img  id="SmallLiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg" width="300px" height="400px"></div>
</body>
</html>

 <script type="text/javascript">
 	var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例
 	var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例
    function createMarker(x, y,divName) {
        var div = document.createElement('div');
        div.className = 'marker'; div.style.left = x + 'px'; div.style.top = y + 'px';
        document.getElementById(divName).appendChild(div)
    }
    
    
    
    document.getElementById('dv').onclick = function (e) {
        e = e || window.event;
        var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
        createMarker(x, y,'dv');
        
        //获取图片的高度和宽度
       var myImg = document.querySelector("#LiuYiFeiImg");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
            alert("图片高度："+currHeight);
            alert("图片宽度："+currWidth);
          ProportionWidthInImg=x/currWidth;
          ProportionHeightInImg=y/currHeight;
           alert("图片比例高度："+ProportionHeightInImg);
          alert("图片比例宽度："+ProportionWidthInImg);
          MarkSmallImg();
          
    }
 
function MarkSmallImg()
{
	var myImg = document.querySelector("#SmallLiuYiFeiImg");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
            alert("图片高度："+currHeight);
            alert("图片宽度："+currWidth);
            
            //给第二个刘亦菲加标记点
            var x=currWidth*ProportionWidthInImg;
            var y=currHeight*ProportionHeightInImg;
             createMarker(x, y,'dv2');
        
}


 

  </script>
</html>

长安山南君

关注

12
点赞
踩
33

收藏

觉得还不错? 一键收藏
3
评论
用户在图片上点选并标记位置，js实现

说明用户在图片上标记某个点，注意是相对于该图片的绝对位置，即使是在浏览器页面窗口大小的改变的情况下，该标记点相对于图片的位置也不会改变。（jquery.ipicture.js做不到该功能）将标记点位置保存到数据库，下次能在图片相应位置展示出来。本demo中的css是用scss写的，注意变通。演示链接html代码 <html lang="en"><head>...
复制链接

扫一扫