一、通过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. VMware 虚拟化编程(14) — VDDK 的高级传输模式详解

    目录 目录 前文列表 虚拟磁盘数据的传输方式 Transport Methods Local File Access NBD and NBDSSL Transport SAN Transport Ho ...

  2. postman+newman+jenkins接口自动化

    postman用来做接口测试非常方便,接口较多时,则可以实现接口自动化 目录 1.环境准备 2.本机调试脚本 3.集成jenkins 1.环境准备 1.1安装nodejs6.0+ 安装nodejs6. ...

  3. python实现excel转换成pdf

    1.安装 需要安装pywin32包,以实现对Office文件的操作,可以批量转换为pdf文件.支持 doc, docx, ppt, pptx, xls, xlsx 等格式. pip install p ...

  4. python_001

    一.python开发1.python基础 -基础 -基本数据类型 -函数 -面向对象2.网络编程3.web框架 -用于写网站4.设计模式 + 算法

  5. Vue2.0---将页面中表格数据导出excel

    这不是教程,是随笔. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx ...

  6. openWRT利用mac地址限制局域网内设备访问外网

    利用iptable设置防火墙: iptables -A INPUT -p tcp -m mac --mac-source 44:94:FC:25:68:8D --dport 80 -j DROP

  7. 转载-linux挂载的意思

    挂载:Liunx采用树形的文件管理系统,也就是在Linux系统中,可以说已经没有分区的概念了.分区在Linux和其他设备一样都只是一个文件.要使用一个分区必须把它加载到文件系统中.这可能难于理解,继续 ...

  8. [Git] 009 逆转未来

    1. 想逆转未来,得先知道时间线 1.1 git log 1.2 git log --oneline 此命令的显示结果比 git log 简洁 1.3 git reflog 此命令显示的记录比前两者完 ...

  9. [Vim] 03 凡人进阶

    目录 0. 前言 1. 按下 Esc, 进入编辑模式 (1) 定位 (2) 删除 1) 不进入插入模式的删除 2) 进入插入模式的删除 3. 10 个特殊字符 4. 在 gVim 下执行命令 (1) ...

  10. Codeforces 429E(欧拉回路）

    题面 传送门 题目大意: 有n条线段,每条线段染红色或蓝色,使得数轴上每个点被红色线段覆盖的次数与被蓝色线段覆盖数差的绝对值小于等于1.输出染色方案. 分析 题意其实可以这样理解: 一段初始全为0 的 ...