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

源代码如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>通过JS获取图片的相对坐标位置</title>

     <style>

         body {margin: 0; padding: 0; }

         #area{width:300px;height:300px;}

         #area img{border:none;cursor:pointer;width: 300px;height: 300px;}

         .testBox {

             width: 200px;

             height: 200px;

             overflow: auto;

         }

     </style>

 </head>

 <body id="">

     <h3>通过JS获取图片的相对坐标位置 示例</h3>

     <div class="testBox">

         <div id="area" onclick="getClickPos(event);">

             <img id='imageID'   src="data:images/1.jpg">

         </div>

     </div>

     <script type="text/javascript">

         function getClickPos(e){

             var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;

             var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;

             identifyImage = document.getElementById("imageID");

             img_x = locationLeft(identifyImage);

             img_y = locationTop(identifyImage);

             var xPos = xPage-img_x;

             var yPos = yPage-img_y;

             alert('X : ' + xPos + '\n' + 'Y : ' + yPos);

         }

         //找到元素的屏幕位置

         function locationLeft(element){

             offsetTotal = element.offsetLeft;

             scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords

             if (element.tagName != "BODY"){

                 if (element.offsetParent != null)

                     return offsetTotal+scrollTotal+locationLeft(element.offsetParent);

             }

             return offsetTotal+scrollTotal;

         }

         //find the screen location of an element

         function locationTop(element){

             offsetTotal = element.offsetTop;

             scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords

             if (element.tagName != "BODY"){

                 if (element.offsetParent != null)

                     return offsetTotal+scrollTotal+locationTop(element.offsetParent);

             }

             return offsetTotal+scrollTotal;

         }

     </script>

 </body>

补充

二、js图片上标注热点（相对定位）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <style>

        .wrap{

            width:200px;

            height: 200px;

            overflow: auto;

            background: #ccc;

            position: relative;

        }

        .ball{

            width:20px;

            height: 20px;

            background: red;

            border-radius: 50%;

            position: absolute;

        }

    </style>

</head>

<body>

    <div class="wrap">

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

    </div>

    <script>

        $('.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";

            console.log(top);

            console.log(left);

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

        })

    </script>

</body>

</html>

　　

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

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

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

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

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

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

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

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

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

  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. 修改JAVA_HOME失效

    在修改JDK的安装目录的情况下会出现失效的时候,因为jdk在安装的时候自己在path中添加了 C:\ProgramData\Oracle\Java\javapath 这个路径. 解决: 删除 path ...

  2. android：为ListView 添加自定义头部和尾部，上拉主动加载 .（引）

    1.加头尾部 (1)定自义一个xml布局 my_headview.xml 在Activity类里找到这个自定义布局,并添加到头部 LinearLayout  hearderViewLayout = ( ...

  3. 【SD系列】SAP SD模块-公司间销售简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-公司间销售简介   ...

  4. 总结：String类型与Int类型的转换【实现插入操作主键自增】

    1.String类型(此类型是数字格式的字符串类型)转换成Int类型 String str = "10000"; 转换成Int类型: int num = Integer.parse ...

  5. Socket服务端和客户端文件传输

    很多朋友在使用socket编程时不可避免的都做过文件传输,而视频电影等需要一个字节一个字节的传输:但是客户端一般都通过-1进行终止,服务也一样:但是存在的问题是客户端永远不会把-1传递给服务端:因此经 ...

  6. Redis 21问，你接得住不？

    作者:菜鸟小于 cnblogs.com/Young111/p/11518346.html 1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 R ...

  7. Oracle数据库控制台常用命令

    安装好数据库以后可以通过“Win+R”打开控制台,在控制台登录Oracle输入命令来操作数据库. SQLPlus命令: SQLPlus命令是用来登录Oracle数据库的命令,有两种写法,分别如下: ( ...

  8. Oracle数据库用户介绍

    Oracle数据库创建的时候,创建了一系列默认的用户,有时候可能我们不小心忘记创建了某个用户,比如SCOTT用户,我们就需要使用Oracle提供的脚本来创建,介绍如下: 1.SYS/change_on ...

  9. 一个阿里云apache服务器配置两个或多个域名forLinux

    一个阿里云apache服务器配置两个或多个域名for Linux: 默认已经配置好了阿里云提供的一键web安装,可以参考:http://www.42iot.com/?id=8 修改/alidata/s ...

  10. JDK_1.8的Windows和Linux环境下的下载与安装

    下载: Eclipse需要Jdk,MyEclipse有自带的Jdk 直接点击下载. Windows下JDK安装: 双击运行程序 下一步: 路径 更改到E:\Software\Java\jre1.8.0 ...