JavaScript实现图片上标记多点区域

最新推荐文章于 2023-08-18 21:47:30 发布

VIP文章 Jy丶Elean

最新推荐文章于 2023-08-18 21:47:30 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： javacript 图片标记区域坐标

本文链接：https://blog.csdn.net/liji19910313/article/details/46375811

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试图片标记</title>
<style type="text/css">
#container{
position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden;
}
#map{
position:absolute;
}
.mark{
position:absolute; width:2px; height:2px; font-size:0px; background:#FF0000;
}
</style>
<script type="text/javascript">
var mark = [];

function $(id){
return document.getElementById(id);
}
//获取点坐标
function getOffset(obj){
var x = 0, y = 0;
while(obj){
x += obj.offsetLeft;
y += obj.offsetTop;

obj = obj.offsetParent;
}
return {x : x, y : y };
}
//新增div
function addMark(p, x, y, index){
var div = document.createElement("div");
div.id = "mark" + index;
div.className = "mark";
div.style.left = x + "px";
div.style.top = y + "px";
p.appendChild(div);
}

//删除两坐标之间连线
function clearMarkXY(x1,y1,x2,y2){
var container = $("container");
var start=0,end=0;
for(var i=0; i<mark.length; i++){
if(mark[i].split(",")[0]==x1&&mark[i].split(",")[1]==y1){
start=mark[i].split(",")[2];
}
if(mark[i].split(",")[0]==x2&&mark[i].split(",")[1]==y2){
end=mark[i].split(",")[2];
}
}
end=parseInt(end);
for(var i=end+1; i<mark.length-1; i++){
container.removeChild($("m

最低0.47元/天解锁文章

Jy丶Elean

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现图片上标记多点区域

测试图片标记#container{ position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden;}#map{ position:absolute;}.mark{ position:absolute; width:2px; height:
复制链接

扫一扫