gpt4 book ai didi

jquery - 数字随机放置,图像悬停

转载 作者:行者123 更新时间:2023-11-28 01:45:30 24 4
gpt4 key购买 nike

我有一个关于网页的问题。我想在页面上随机放置数字,就像贴墙一样。只是数字。当我将鼠标悬停在一个数字上时,它应该会显示一张图片。图像永远不会显示在数字上。

如下图所示,谁能告诉我这样放置数字的最佳方式?我觉得填充和边距不是最好的方法,但我不知道什么是 And when I hover, the image should never place itself over the number. It doesn't matter if it's over another number, but not the one it is bound to.

当我将鼠标悬停在屏幕上时,图像永远不会放在数字上。它是否超过另一个数字并不重要,但与它绑定(bind)的数字无关。 And when I hover, the image should never place itself over the number. It doesn't matter if it's over another number, but not the one it is bound to.

我不是要任何人为我做这个数学,只是我应该如何思考。解决此问题的明智方法。

最佳答案

尝试这样的事情。输入您想要的图 block 数量并添加显示图片而不是更改 backgournd-color

此代码创建随机顺序的数字。

function start() {
var maxNumber = 8,
div = "",
array = [];

while (array.length < maxNumber) {
var x = Math.floor(Math.random() * 8) + 1;
if ($.inArray(x, array) == -1) {
array.push(x);
}
}

for (var i = 0; i < maxNumber; i++) {
div += "<div class='row'>";
for (var j = 0; j < 3; j++) {
div += `<div class='col-xs-4 tile' id='${"div-"+i}'>${array[i]}</div>`;
if (j < 2) i++;
if (i >= maxNumber) break;
}
div += "</div>";
if (i + 1 >= maxNumber) break;
}

$("#numberPanel").append(div);

for (var i = 0; i < maxNumber; i++) {
$("#div-" + i).on('mouseenter', function() {
$(this).css('background-color', 'red');
});
$("#div-" + i).on('mouseout', function() {
$(this).css('background-color', 'white');
});
}
}

start();
body {
padding: 10px;
margin: 10px;
}

.tile {
border: 1px solid black;
padding: 15px;
max-width: 85px;
max-height: 85px;
width: 85px;
height: 85px;
}
<html>

<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<br/>
<div id="numberPanel">

</div>
</body>

</html>

关于jquery - 数字随机放置,图像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50208457/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com