我正在用 html、css 和 javascript(jQuery) 制作一个小元素。基本上，我有一个 svg(这是一张空白的世界地图)，我想覆盖该图像的每个部分(或者基本上只覆盖图像占据的网页部分就足够了，但这并不精确) 与我创建的 div 的倍数(这是一个小圆圈)。换句话说，我想在那些圈子的空白 map 图像上覆盖每个国家，然后再做一个动画。有没有一种方法可以自动执行此操作，而不必每次都复制粘贴 div 来制作具有不同坐标的新 div(因为到目前为止我就是这样做的)。另外，由于我使用坐标定位所有 div，当网页在最小化屏幕中打开时，它们显然不在我的 svg 的同一部分，而在全屏时(因为从技术上讲，div 甚至没有放在 on 实际图像，而是在 body 上 over 我的图像)。有没有更好的方法来做到这一点(将 div 放在图像本身上并使它们无论窗口大小如何都留在图像的同一区域？)我很新所有这一切，所以我知道我的代码绝对不是最好的，并且可以用更好的方式完成，而且我上次进行任何网页设计已经有好几年了。
此外，这些圆形 div 在悬停时移动到随机位置，这可以在下面的 js/jQuery 中看到。这部分工作正常，但我知道我可能必须根据我更改 css/html 的方式来更改它。
您可以在下面找到我的代码的所有部分，如果您发现代码非常糟糕，我提前道歉，我知道这一切都可以用更好的方式完成。
这是 js fiddle ，它有点总结(就像下面的代码片段一样，图像与我自己的不同，这里不是 svg，所以 circle-divs 放置在错误的位置，它们是正确的放置在我原始文件中的 map 的一部分上):https://jsfiddle.net/xoypvnmc/ ---和全屏版本:https://jsfiddle.net/xoypvnmc/show
提前谢谢大家，如果您对我的元素有任何疑问或需要任何其他信息，请询问!
$('.circles').on('mouseenter', function(e) {
var maxX = $(window).width() - $(this).width();
var maxY = $(window).height() - $(this).height();
$(this).css({
'left': getRandomInt(0, maxX),
'top': getRandomInt(0, maxY)
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}body {
background-color: #ECF9F9;
}
.circles {
position: absolute;
transition: all 2s;
width: 12px;
height: 12px;
border-radius: 50%;
background: cadetblue;
}
#circle1 {left:1104px; top:301px; background: tomato;}
#circle2 {left:529px; top:301px;}
#circle3 {left:517px; top:301px;}
#circle4 {left:505px; top:301px;}
#circle5 {left:493px; top:301px;}
#circle6 {left:481px; top:301px;}
#circle7 {left:469px; top:301px;}
#circle8 {left:457px; top:301px;}
#circle9 {left:445px; top:301px;}
#circle10 {left:433px; top:301px;}
#circle11 {left:421px; top:301px;}
#circle12 {left:409px; top:301px;}
#circle13 {left:397px; top:301px;}
#circle14 {left:385px; top:301px;}
#circle15 {left:373px; top:301px;}
#circle16 {left:361px; top:301px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<div class="circles" id="circle1"></div>
<div class="circles" id="circle2"></div>
<div class="circles" id="circle3"></div>
<div class="circles" id="circle4"></div>
<div class="circles" id="circle5"></div>
<div class="circles" id="circle6"></div>
<div class="circles" id="circle7"></div>
<div class="circles" id="circle8"></div>
<div class="circles" id="circle9"></div>
<div class="circles" id="circle10"></div>
<div class="circles" id="circle11"></div>
<div class="circles" id="circle12"></div>
<div class="circles" id="circle13"></div>
<div class="circles" id="circle14"></div>
<div class="circles" id="circle15"></div>
<div class="circles" id="circle16"></div>
<img width="100%" height="100%" id="pic" src="https://i.pinimg.com/originals/0e/31/81/0e31812689ecf1158cd5ed43a79f636b.gif" </img>
</body>最佳答案
您可以使用 JavaScript 内联的位置样式生成圆形 div，并以这种方式将它们添加到页面上的 div。
document.getElementById("circles").innerHTML = htmlToAdd;
并且您可以通过添加一个相对容器来相对于图像而不是整个页面定位圆圈，该容器会收缩以适合图像并将圆圈也扔进去。您的整个代码将如下所示:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
background-color:#ECF9F9;
}
img{
width:100%;
}
#mapContainer{
position:relative;
display:inline-block;
width:50%;
}
.circles{
position: absolute;
transition: all 2s;
width: 12px;
height: 12px;
border-radius: 50%;
background:cadetblue;
}
#circle1 {background: tomato;}
</style>
<script>
function generateCircles(circleCount){
var htmlToAdd = "";
for(var i = 0; i < circleCount; i++){
var maxCirclesPerRow = Math.floor($("#mapContainer").width() / 12);
var row = Math.floor(i / maxCirclesPerRow);
var top = row * 12;
var right = (i - (row * maxCirclesPerRow)) * 12;
htmlToAdd += "<div class=\"circles\" id=\"circle" + (i + 1) + "\" style=\"top:" + top + ";right:" + right + "px;\"></div>";
}
document.getElementById("circles").innerHTML = htmlToAdd;
$('.circles').on('mouseenter', function (e) {
var maxX = $("#mapContainer").width() - $(this).width();
var maxY = $("#mapContainer").height() - $(this).height();
$(this).css({
'right': getRandomInt(0, maxX),
'top': getRandomInt(0, maxY)
});
});
}
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body onload="generateCircles(200);">
<div id="mapContainer">
<img id="pic" src="https://i.pinimg.com/originals/0e/31/81/0e31812689ecf1158cd5ed43a79f636b.gif"</img>
<div id="circles"></div>
</div>
</body>
</html>
我添加了一些数学知识来在 map 上动态定位圆圈，因此您可以将任意数量的圆圈传递给 genereateCircles 函数。我已经在我的示例代码中为您传递了 200。如果您特别需要任何部分的解释，请告诉我。
关于jquery - 有没有办法完全覆盖div中的复杂区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59234778/