图片坐标问题

最新推荐文章于 2022-04-13 00:42:11 发布

BUG创建者

最新推荐文章于 2022-04-13 00:42:11 发布

阅读量1k

点赞数 1

分类专栏： js html5

本文链接：https://blog.csdn.net/wzwzwz555/article/details/89885318

版权

js 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE 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>
<style>
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: .7;
    border-radius: 100%;
    transition: .4s;
}
    .wrap:hover{
      opacity: 1;
    }
  




</style>
<body>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <div class="wrap">
    <img src="http://files.wmxa.cn/j1/190504/233AG130-6.bmy" alt="刘亦菲">
  </div>
</body>
<script>
$(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);          
          

          console.log("弹窗展示鼠标点击在图片的位置");
          console.log("x:"+x);
          console.log("y:"+y);
          console.log("利用css显示样式，或者存入数据库");
        }
       
      }

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



</script>
</html>

BUG创建者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片坐标问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片热点问题</title> <meta name="viewport" content="width=device-width,initial-scale=1.0...
复制链接

扫一扫