js点击获取—通过JS获取图片的相对坐标位置
一、通过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获取图片的相对坐标位置的更多相关文章
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- js点击按钮,放大对应图片代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 点击往div里添加图片(实例)
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- js点击事件代理时切换图片如何防抖动
由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果
- js点击获取—通过JS获取图片的绝对对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- js实现类似qq表情(插入图片以及获取光标的效果)
<!doctype html><html style="height:100%"><head><meta charset="ut ...
- 解决在页面中无法获取qrcode.js生成的base64的图片
应用场景 生成带二维码的推广海报图片 旧方法: 将用户自己的推广连接先通过qrcode.js生成二维码,然后再用后台返回的一张背景图片和二维码通过canvas绘制成一张海报. 问题 在部分安卓手机上获 ...
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用
业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...
随机推荐
- 手动配置 ESXi 主机挂载 NFS 的最大值
目录 目录 资料 手动配置 ESXi 主机挂载 NFS 的最大值 资料 官方 KB 地址 手动配置 ESXi 主机挂载 NFS 的最大值 Open: 清单 ==> ESXi 主机 ==> ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_1_字符串概述和特点
在api中查找 java.lang包里面的不用引用
- 《图解设计模式》读书笔记5-2 decorator模式
目录 代码演示 模式的角色和类图 思路拓展 Decorator模式即装饰器模式,就是对类进行装饰,下面通过代码说明. 代码演示 代码展示的内容 有一个类StringDisplay:表示一句话,比如he ...
- python学习笔记(数据类型)
python数据类型: int 类型 float 小数类型 string 字符串 布尔类型 a = True b = False 1.列表,也称数组或list或array.它的表达方式通过下标或索引或 ...
- VGA时序及其原理(转载)
显示器扫描方式分为逐行扫描和隔行扫描:逐行扫描是扫描从屏幕左上角一点开始,从左像右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT对电子束进行消隐,每行结束时,用行同步信 ...
- 【minicap】基于图像识别的手机端UI自动化测试的截图方式更新
minicap属于STF框架的一个工具,可以高速截图.同步手机屏幕至浏览器等 为什么用minicap截图: 经过试验,截同一个屏幕的一张图,adb shell screencap速度为2.9秒,而 ...
- PHPstorm Xdebugger最全详细
0 Xdebug调试的原理(选看) 图0-1 单机调试原理示意图 图0-2 多机调试原理示意图 对于PHP开发,初来咋到,开发环境的搭建和理解感觉是最烦人的一件事了.不像JAVA,打开一个Eclips ...
- django中orm多表查询,减少数据库查询操作
.select_related() 的使用
- 应用安全-Web安全-XSS(跨站攻击)攻防整理
分类 反射型 存储型 DOM型 XSF(Flash XSS) PDFXSS MHTML协议跨站(MHTML,data) 字符编码(UTF-7 XSS) 富文本编辑器测试 - 输入框 <img S ...
- Redis功能迅速回忆