悬浮坐标的定义，基于固定分辨率的图片，通过获取该图片x和y坐标确定位置后并添加标注，实现位置展示、对应图片内物品展示的一种标注开发方式。
技术要点
- 自动获取图片x和y坐标；
- 将多个坐标xy在图片上通过CSS定位的方式予以展示；
- 鼠标高亮提示事件；
- 鼠标点击事件；
css层叠样式表
- 由于不同电脑设备的分辨率不同，因此在使用图片悬浮坐标定位的时候，一般需要将图片设置成固定尺寸。基于19201080，16:9分辨率显示器，一般推荐1600900的弹窗展示。
- 为了避免弹出图片无法覆盖，建议设置对应的背景颜色；
- 实现原理：基于css层叠样式表各元素利用position: relative和position:absolute，相对定位和绝对定位，分层分级加载展示。
复制代码
1
2
3
4
5
6
7
8
9
10
11
12.container { position: relative; width: 1600px; margin: 0 auto; padding: 0; } .lockImg { position: absolute; cursor: pointer; }
HTML图片容器展示
复制代码
1
2
3
4
5
6
7
8
9
10<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坐标
(1)JQ封装函数方式
图片事件
复制代码
1
2<img id="imageId" src="images/main.jpg" onclick="handleClick(event)">
获取坐标封装函数
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17//获取鼠标点击位置 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坐标传入到数据库*/ }
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22//找到元素的屏幕位置 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; }
复制代码
1
2
3
4
5
6
7
8
9
10
11
12// 添加自定义内容 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类型传参
复制代码
1
2
3
4<form action="getCoords.php" method="post"> <input type="image" src="images/main.jpg" id="hotImg"> </form>
getCoords.php
复制代码
1
2
3
4
5
6
7$cord = $_POST; echo "<pre>"; echo "x坐标:" . $cord["x"]; echo "<pre>"; echo "y坐标:" . $cord["y"];
@漏刻有时
最后
以上就是自觉战斗机最近收集整理的关于悬浮坐标解决方案：如何在图片获取xy鼠标位置和增加标注信息技术要点的全部内容，更多相关悬浮坐标解决方案内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复