如何点击生成div进行网页缩放后位置仍在原处(map标签)
我这里用map的coords为图中每个建筑绑定了范围，鼠标点击建筑之后在鼠标点击位置生成对应建筑的信息，但是在ctrl+鼠标滚轮进行网页缩放后，之前点击生成的div就不在点击的建筑旁边了，请问如何能将点击生成的div和点击的建筑绑定在一起，网页缩放之后div能跟随之前点击的建筑在一起移动，一直在点击的建筑旁边
例如：
点击上图红圈按位置生成信息
进行网页缩放后仍能在红圈位置右下角不会偏移走
以下是目前的代码，为了避免泄露信息所以只保留了一条area
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>校园规划地图</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 1052px;
margin: 0 auto;
}
.main{
height: 750px;
width: 1052px;
}
#box
{
font-family: FangSong;
font-size: 15px;
border-radius: 10px;
height: 230px;
width: 400px;
transform-origin: top left;
}
.header{
height: 70px;
display: flex;
justify-content: space-between;
}
</style>
<body>
<div class="header wrapper">
<img src="mapimg/logo.png" alt="">
<img src="mapimg/xiaoxun.png" alt="">
</div>
<div class="main wrapper">
<img src="mapimg/校园建设规划图.jpg" alt="" usemap="#map" height="744px" width="1052px">
<div id="box"></div>
<map name="map">
<area shape="rect" alt="" title="学生宿舍1幢" coords="238,287,257,299" onclick="showBuildingInfo('学生宿舍1幢','西校区','1996.7','1997.5','3099.84','--','--','--','--','无','无','无')">
</map>
</div>
<script>
var map = document.querySelector('map[name="map"]');
var box = document.getElementById("box");
var boxes = [];
function showBuildingInfo(buildingName,buildingPlace,stratTime,endTime,coverArea,constructionCompany,designCompany,detectCompany,supervisorCompany,prize,prizeTime,remark){
buildingName1 = buildingName;
buildingPlace1 = buildingPlace;
stratTime1 = stratTime;
endTime1 = endTime;
coverArea1 = coverArea;
constructionCompany1 = constructionCompany;
designCompany1 = designCompany;
detectCompany1 = detectCompany;
supervisorCompany1 = supervisorCompany;
prize1 = prize;
prizeTime1 = prizeTime;
remark1 = remark;
}
var flag=0;
var initzoom=1;
var dif=0;
var zoomLevel=1;
window.addEventListener('resize', function() {
if(flag==0){
initzoom = window.devicePixelRatio;
dif = 1 - initzoom;
flag=1;
}
zoomLevel = window.devicePixelRatio || 1; // 获取当前缩放比例
var rect = box.getBoundingClientRect();
box.style.transform = 'scale(' + (initzoom+dif)/(zoomLevel+dif) + ')';
});
map.addEventListener("click", function(event) {
if (boxes.length > 0) {
var lastBox = boxes.pop(); // 获取最后一个盒子
lastBox.remove(); // 删除盒子
}
document.getElementById('box').innerHTML = '项目名称:' + buildingName1 + '<br>项目地点:' + buildingPlace1 + '<br>开工时间:' + stratTime1 + '<br>竣工时间:' + endTime1 + '<br>建筑面积:' + coverArea1 +'㎡' +'<br>施工单位:' + constructionCompany1 + '<br>设计单位:' + designCompany1 + '<br>勘察单位:' + detectCompany1 + '<br>监理单位:' + supervisorCompany1 + '<br>获奖情况:' + prize1 + '<br>获奖时间:' + prizeTime1 + '<br>备注:' + remark1;
box.style.border = "2px solid red";
box.style.backgroundColor = "rgba(247, 249, 248, 0.6)";
box.style.position = "absolute";
box.style.left = event.pageX + "px";
box.style.top = event.pageY + "px";
box.style.display = "block";
console.log(event.pageX,event.pageY);
box.appendChild(div); // 将盒子添加到容器中
boxes.push(div);
});
document.addEventListener("click", function(event) {
if (!map.contains(event.target)) {
box.style.display = "none";
}
});
</script>
</body>
</html>
【以下回答由 GPT 生成】
根据问题描述，你想要在网页缩放后保持点击生成的div与点击的建筑绑定在一起。你可以使用JavaScript来实现此目的。以下是可能的解决方案:
- 将点击生成的div移动到点击的建筑旁边的位置。
- 监听窗口缩放事件，并在每次缩放后重新定位div的位置。
下面是具体解决方案的代码：
// 获取建筑区域的元素
var buildingArea = document.querySelector('area');
// 获取点击生成的div元素
var infoBox = document.getElementById('box');
// 监听建筑区域的点击事件
buildingArea.addEventListener('click', function (event) {
// 根据点击位置设置div的位置
var x = event.pageX;
var y = event.pageY;
infoBox.style.left = x + 'px';
infoBox.style.top = y + 'px';
});
// 监听窗口缩放事件
window.addEventListener('resize', function () {
// 获取建筑区域的点击位置
var x = parseInt(buildingArea.coords.split(',')[0]);
var y = parseInt(buildingArea.coords.split(',')[1]);
// 计算div的新位置
var newLeft = x * window.innerWidth / document.documentElement.clientWidth;
var newTop = y * window.innerHeight / document.documentElement.clientHeight;
// 设置div的新位置
infoBox.style.left = newLeft + 'px';
infoBox.style.top = newTop + 'px';
});
请将以上代码插入到你的HTML文件中，并将其中的x1,y1,x2,y2替换为实际的建筑区域范围。将showBuildingInfo()函数替换为你实际显示建筑信息的函数。
这样修改后，当点击建筑区域时，div会根据点击位置显示，并且在窗口缩放后可保持和建筑区域的绑定。注意，你还需要根据实际需求对div的样式进行调整，使其显示在点击区域的旁边。
希望这个解决方案对你有帮助！如果你还有任何问题，请随时提问。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
要实现网页缩放后div位置仍保持在原处，可以使用CSS的定位属性和JavaScript来实现。下面是一种实现方法：
首先，在HTML中创建一个包含div和map标签的容器，如下所示：
<div id="container">
<div id="myDiv">这是一个div元素</div>
<map name="myMap">
<!-- 在这里定义map的区域链接 -->
</map>
</div>
然后，使用CSS将容器div的位置固定在网页中的特定位置。例如，可以将容器div的定位属性设置为fixed，并指定其top和left属性的值，使其保持在原始位置上。可以根据自己的需求进行微调，例如：
#container {
position: fixed;
top: 50px;
left: 50px;
}
接下来，使用JavaScript监听窗口缩放事件，并在缩放发生时调整div的位置。可以使用window对象的resize事件来实现这一点。在事件处理程序中，通过计算缩放比例以及原始位置的偏移量，将div的新位置设置为固定位置减去偏移量的结果。代码示例如下：
window.onresize = function() {
var container = document.getElementById("container");
var myDiv = document.getElementById("myDiv");
var originalLeft = ...; // 原始位置的left值
var originalTop = ...; // 原始位置的top值
var scaleFactor = ...; // 缩放比例
var newLeft = originalLeft / scaleFactor;
var newTop = originalTop / scaleFactor;
container.style.left = newLeft + "px";
container.style.top = newTop + "px";
};
在上面的代码中，需要根据实际情况获取原始位置的left值、top值以及缩放比例。可以根据网页布局和缩放机制进行调整。
通过以上方法，在网页缩放后，div的位置应该会保持在原处，不受缩放影响。注意，此方法只适用于网页缩放，如果用户拖动浏览器窗口大小，div的位置可能需要通过不同的方法进行调整。
js实现图片在div内滚轮放大缩小，有滚动条，双击回原状
<style type="text/css">
*{padding:0;margin:0;}
img{border:none;}
#display{max-width:660px;max-height:510px;margin:30px auto;overflow:scroll;}
</style>
<script type="text/javascript">
function orgsize(){
$("#showimg").width(650);
$("#showimg").height(500);
$('#showimg').css("margin-left","1px");
$('#showimg').css("margin-top","1px");
}
var div1 = document.getElementById("showimg");
var offX = 0,offY = 0;
div1.onmousedown = function(ev){
ev.preventDefault(); //阻止浏览器动作，有些浏览器试图拖拽图片的时候，是会把图片单独到一个页面来查看的。
var oevent = ev || event; //兼容性处理
var distanceX = oevent.clientX; //记录鼠标点击x位置
var distanceY = oevent.clientY; //记录鼠标点击y位置
document.onmousemove = function(ev){ //当鼠标点击后，才对document设置mousemove事件
var oevent = ev || event;
x1 = oevent.clientX - distanceX;//oevent.clientX是鼠标移动到的x位置，oevent.clientX-distanceX是移动的距离
y1 = oevent.clientY - distanceY;
distanceX = oevent.clientX; //更新distanceX的位置信息。这一步非常重要非常重要非常重要，因为mousemove事件在鼠标移动时触发，而不是鼠标停止移动后触发
distanceY = oevent.clientY;
div1.style.marginLeft = (x1 + offX) + "px"; //若x1为正，则鼠标向右移动，设置图片的margin-left为正，向右偏移；为负同理向左偏移。
div1.style.marginTop = (y1+ offY) +"px"; //offX和offY为前一次的偏移，本次移动是在前一次的基础上发生的，要加上偏移值才是鼠标本次移动后图片的位置。
offX = x1+offX; //记录此时图片的偏移位置
offY = y1+offY;
};
document.onmouseup = function(){ //鼠标抬起后，就取消document的mousemove事件
document.onmousemove = null;
};
}
</script>
<script type="text/javascript">
window.onload=function(){
var display = document.getElementById('display');
var _wheelDelta=0,upcheck=-1;
addScrollListener(display,wheelHandle);
}
function addScrollListener(element, wheelHandle) {
if(typeof element != 'object') return;
if(typeof wheelHandle != 'function') return;
// 监测浏览器
if(typeof arguments.callee.browser == 'undefined') {
var user = navigator.userAgent;
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera;
b.ie = user.indexOf("MSIE") > -1 && !b.opera;
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;
arguments.callee.browser = b;
}
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', wheelHandle);
else
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false);
}
function getStyleValue(objname,stylename){
if(objname.currentStyle){
return objname.currentStyle[stylename]
}else if(window.getComputedStyle){
stylename = stylename.replace(/([A-Z])/g, "-$1").toLowerCase();
return window.getComputedStyle(objname, null).getPropertyValue(stylename);
//return window.getComputedStyle(objname , null)[stylename];
}
}
function wheelHandle(e) {
if(e.wheelDelta) {
//document.getElementById('display').innerHTML = (e.wheelDelta > 0 ? '上' : '下');
upcheck = e.wheelDelta >0 ? 1 : 0;
//_wheelDelta += e.wheelDelta/(-40);
} else {
//alert(e.detail);
upcheck = e.detail <0 ? 1 : 0;
//_wheelDelta +=e.detail;
}
showimg();
}
function showimg(){
var tmpobj = document.getElementById("showimg");
var width = parseInt(getStyleValue(tmpobj,'width'));
var height = parseInt(getStyleValue(tmpobj,'height'));
var i = width/height;// alert(i);
//alert( width + ' ' + height);
/*if(_wheelDelta<0){
if(width>=0){
tmpobj.style.height = (width + _wheelDelta*10) + 'px';
tmpobj.style.width = (height + _wheelDelta*10*i) + 'px';
}
}else{
if(width<=1024){
tmpobj.style.height = (width - _wheelDelta*10) + 'px';
tmpobj.style.width = (height - _wheelDelta*10*i) + 'px';
}
}*/
if(upcheck){
if(width<=3096){
tmpobj.style.height = (height + 30) + 'px';
tmpobj.style.width = (width + 30*i) + 'px';
}
}else{
if(width>=35){
tmpobj.style.height = (height - 30) + 'px';
tmpobj.style.width = (width - 30*i) + 'px';
}
}
}
/*var scrollfunc = function(event) {
var direct = 0;
if (event.wheelDelta) {
alert(wheelDelta);
//direct = event.wheelDelta > 0 ? 1 : -1;
} else if (event.detail) {
alert(event.detail);
//direct = event.detail < 0 ? 1 : -1;
}
};
Event.observe(document, 'mousewheel', scrollfunc);
Event.observe(document, 'DOMMouseScroll', scrollfunc);*/ //firefox
</script>
<div id="display" style="height:500px;width:650px;margin:0 auto">
<img src="${staticPath }/scene/areaPic" id="showimg" width="650px" height="500px" ondblclick="orgsize()" style="display:block;margin:auto;cursor:pointer;" />
</div>
将点击生成的div移动到点击的建筑旁边的位置，或者监听窗口缩放事件，并在每次缩放后重新定位div的位置
当用户使用鼠标滚轮进行缩放时，更新div的位置。在缩放事件（wheel）的处理函数中，计算新的位置并更新div的样式。
参考newbing
<div id="map">
<!-- 地图上的建筑 -->
<div class="building" data-coords="10,20"></div>
<div class="building" data-coords="30,40"></div>
<!-- 生成的div -->
<div id="info" style="position: absolute; top: 50px; left: 50px;">
<!-- div内容 -->
</div>
</div>
要使生成的 div 在网页缩放后仍位于原处，您可以使用 CSS 的相对定位（relative positioning）和缩放（scaling）属性。
设置div的样式和transform-origin属性，可以实现在网页缩放时保持div位置不变