一、通过JS获取鼠标点击时图片的相对坐标位置

源代码如下所示： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <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;

        }

        .box {

            width: 400px;

            height: 400px;

            overflow: auto;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="wrap">

        <img  src="data:images/test.jpg" alt="">

        <div class="container"></div>

    </div>

</div>

<script src="js/jquery-2.1.3.min.js"></script>

<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>');

        $('.container').html('<div class="ball" style="top:'+top+';left:'+left+'"></div>');

        alert(top+"_"+left);

    })

</script>

</body>

</html>

js点击获取—通过JS获取图片的绝对对坐标位置的更多相关文章

  1. js点击按钮，放大对应图片代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js 点击往div里添加图片（实例）

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  3. js点击事件代理时切换图片如何防抖动

    由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果

  4. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  5. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  6. js实现类似qq表情（插入图片以及获取光标的效果）

    <!doctype html><html style="height:100%"><head><meta charset="ut ...

  7. 解决在页面中无法获取qrcode.js生成的base64的图片

    应用场景 生成带二维码的推广海报图片 旧方法: 将用户自己的推广连接先通过qrcode.js生成二维码,然后再用后台返回的一张背景图片和二维码通过canvas绘制成一张海报. 问题 在部分安卓手机上获 ...

  8. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  9. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

随机推荐

  1. PowerBI 的简单介绍

    一  切片器 给我的感觉就是groupby,就是按照某个维度进行了分组,然后显示. https://www.jianshu.com/p/2e78bf342747 二  建模 https://zhuan ...

  2. 解决Delphi窗体缩放の疑难杂症

    http://anony3721.blog.163.com/blog/static/511974201082235754423/ 解决Delphi窗体缩放の疑难杂症 2010-09-22 15:57: ...

  3. 类TreeSet

    /* * TreeSet能够对元素按照某种规则进行排序 * * 排序有2种方式 * A自然排序 * B比较器排序 * */ import java.util.TreeSet; /* * TreeSet ...

  4. jvm jstack log分析工具，在线分析

    http://spotify.github.io/threaddump-analyzer Spotify提供的Web版在线分析工具,可以将锁或条件相关联的线程聚合到一起.

  5. auto_ptr与shared_ptr

    注: 从c++11开始, auto_ptr已经被标记为弃用, 常见的替代品为shared_ptr shared_ptr的不同之处在于引用计数, 在复制(或赋值)时不会像auto_ptr那样直接转移所有 ...

  6. vuer-cli 安装笔记

    电脑上装 的软件全卸载了.需要 重装 .整理了一下vue-cli脚手架搭建 1 先下载git 2 再下载node 3安装淘宝镜像 (https://npm.taobao.org/) 4 安装webpa ...

  7. STM32 RTC

    目前较为实用的RTC时钟源选择的是:32.768k LSE 低速外部时钟: 不建议实用LSI,精度不高,对时间精度要求不高的可以考虑实用LSI时钟源.数据手册上电气特性的数据:

  8. git ssh key配置&解决git每次输入密码

    git ssh key配置&解决git每次输入密码:https://blog.csdn.net/qq_42817227/article/details/81415404

  9. luogu 3426题解 （KMP）

    题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段作为模版. 然后将模版重复喷涂到相应的位置后就得到了他想要的字符序列.一个字符可以被喷涂很多次,但是一个位置 ...

  10. 一键生成APK

    傻瓜式的生成APK网址:https://www.appbsl.com/ 第一步 第二步 第三步 第四步