悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
原创
©著作权归作者所有:来自51CTO博客作者漏刻有时的原创作品,请联系作者获取转载授权,否则将追究法律责任
![在这里插入图片描述 悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息_css3](https://s2.51cto.com/images/blog/202210/29052647_635c49178ca5e58261.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
悬浮坐标的定义,基于固定分辨率的图片,通过获取该图片x和y坐标确定位置后并添加标注,实现位置展示、对应图片内物品展示的一种标注开发方式。
技术要点
- 自动获取图片x和y坐标;
- 将多个坐标xy在图片上通过CSS定位的方式予以展示;
- 鼠标高亮提示事件;
- 鼠标点击事件;
css层叠样式表
- 由于不同电脑设备的分辨率不同,因此在使用图片悬浮坐标定位的时候,一般需要将图片设置成固定尺寸。基于19201080,16:9分辨率显示器,一般推荐1600900的弹窗展示。
- 为了避免弹出图片无法覆盖,建议设置对应的背景颜色;
- 实现原理:基于css层叠样式表各元素利用position: relative和position:absolute,相对定位和绝对定位,分层分级加载展示。
.container {
position: relative;
width: 1600px;
margin: 0 auto;
padding: 0;
}
.lockImg {
position: absolute;
cursor: pointer;
}
HTML图片容器展示
<div class="container">
<!--图片-->
<img src="images/main.jpg" id="hotImg">
<!--悬浮坐标点位-->
<img src="images/icon.png" style="left:calc(76px - 16px);top:calc(158px - 36px);" class="lockImg">
<img src="images/icon.png" style="left:calc(232px - 16px);top:calc(328px - 36px);" class="lockImg">
<img src="images/icon.png" style="left:calc(364px - 16px);top:calc(306px - 36px);" class="lockImg">
<img src="images/icon.png" style="left:calc(615px - 16px);top:calc(209px - 36px);" class="lockImg">
</div>
-
style="left:calc(76px - 16px);top:calc(158px - 36px)
,因标注icon本身是图片,具有长宽属性,在进行absolute定位时,需要把已经确定的xy坐标进行相对应的offset偏离设置; - offset中的16px和36px,具体的值依据icon图片的尺寸大小手动调整,能准确标识对应的图片位置即可。
获取图片xy坐标
![在这里插入图片描述 悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息_css_02](https://s2.51cto.com/images/blog/202210/29052647_635c4917734a796012.gif)
(1)JQ封装函数方式
图片事件
<img id="imageId" src="images/main.jpg" onclick="handleClick(event)">
获取坐标封装函数
//获取鼠标点击位置
function lockClick(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;
var imgEl = document.getElementById("imageId");
var img_x = locationLeft(imgEl);
var img_y = locationTop(imgEl);
var xPos = xPage - img_x;
var yPos = yPage - img_y;
//当前点击位置
var hotspot = {x: xPos, y: yPos};
/*01.在当前为准展示图片*/
addHotspot(hotspot);
/*02.通过ajax接口将x、y坐标传入到数据库*/
}
//找到元素的屏幕位置
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;
}
// 添加自定义内容
function addHotspot(hotspot) {
var x = hotspot.x - 16;
var y = hotspot.y - 36;
var src = 'images/icon.png';
var imgEle = '<img ' + ' src="' + src + '" style="top: '
+ y + 'px; left: ' + x + 'px; position: absolute; cursor: pointer;"'
+ ')" />';
$('.container').append(imgEle);
}
(2)使用php中的POST传参
使用input image类型传参
<form action="getCoords.php" method="post">
<input type="image" src="images/main.jpg" id="hotImg">
</form>
getCoords.php
$cord = $_POST;
echo "<pre>";
echo "x坐标:" . $cord["x"];
echo "<pre>";
echo "y坐标:" . $cord["y"];
@漏刻有时