悬浮坐标的定义，基于固定分辨率的图片，通过获取该图片x和y坐标确定位置后并添加标注，实现位置展示、对应图片内物品展示的一种标注开发方式。

技术要点

1. 自动获取图片x和y坐标；
2. 将多个坐标xy在图片上通过CSS定位的方式予以展示；
3. 鼠标高亮提示事件；
4. 鼠标点击事件；

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图片容器展示

• style="left:calc(76px - 16px);top:calc(158px - 36px)，因标注icon本身是图片，具有长宽属性，在进行absolute定位时，需要把已经确定的xy坐标进行相对应的offset偏离设置；
• offset中的16px和36px，具体的值依据icon图片的尺寸大小手动调整，能准确标识对应的图片位置即可。

获取图片xy坐标

(1)JQ封装函数方式

图片事件

获取坐标封装函数

    //获取鼠标点击位置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 coordsif (element.tagName != "BODY") {if (element.offsetParent != null)return offsetTotal + scrollTotal + locationLeft(element.offsetParent);}return offsetTotal + scrollTotal;}//find the screen location of an elementfunction locationTop(element) {offsetTotal = element.offsetTop;scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coordsif (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 = '';$('.container').append(imgEle);}

(2)使用php中的POST传参

使用input image类型传参

getCoords.php

$cord = $_POST;
echo "
";
echo "x坐标:" . $cord["x"];
echo "
";
echo "y坐标:" . $cord["y"];
 
 
@漏刻有时