我留下了一个问题,因为编码时出现了问题。当按下按钮时,方形div将被放置在一个随机位置。
按钮的位置取决于屏幕的比例。▾ 请检查与图像的设计。▾
通过多次编码,我考虑了使用哪种结构,并继续使用下面的代码。
在手机屏幕上,我隐藏了桌面上的按钮。我制作了另一个只能在手机屏幕上看到的导航条,并制作了我前面提到的按钮。因此,当我在桌面上观看屏幕比率时,正方形div不是处于随机位置,而是始终位于顶部。
我真诚地希望你能让我知道问题出在哪里。
我不是一个编码Maven,所以如果你能用具体的代码来解释,我会非常感激。
提前谢谢你!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{margin-top: 0px; margin-right: 0px; margin-left: 0px;}
button {position: relative; width: 30px; height: 30px; background: #edd6bc; border: none; }
.random {position: absolute; width: 30px; height: 30px; cursor: move;}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
header {
display: grid;
grid-template-columns: 1fr 7fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo nav" "logo notice";
}
.logo {
grid-area: logo;
padding: 10px;
text-align: center;
border-bottom: 1px solid black;
}
nav {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-area: nav;
}
.notice {
grid-area: notice;
padding: 10px;
}
nav a {
padding: 10px;
text-align: center;
}
main {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
}
main>div {
padding: 10px;
text-align: center;
}
.replat_mobile {
display: none;
}
@media screen and (max-width: 800px) {
.gone{display: none;}
nav{width: 100vw;}
.replat_mobile {
clear: both;
display: block;
float: left;
margin-left: 0px;
width: 10px;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
header {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo nav" "logo notice";
}
nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-area: nav;
}
.notice {
grid-area: notice;
padding: 10px;
}
nav a {
padding: 10px;
text-align: center;
}
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
main>div {
padding: 10px;
text-align: center;
}
}
</style>
<!--전시 컬러칩 드레그 이동 z-index 변경-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
var a = 3;
$('.random').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('body div').click(function() {
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="replat_mobile" >
<nav>
<a style="background-color: red;">
<button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></a>
<a style="background-color: yellow;"> <img style="height: calc(20vw - 50px);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg"> </a>
<a style="background-color: blue;"> Eng </a>
</nav>
</div>
<header>
<div class="logo gone" style="border-right: 1px solid black;">Logo</div>
<nav>
<a href="#" style="border-right: 1px solid black;" >About</a>
<a href="#" style="border-right: 1px solid black;" >Exibition</a>
<a href="#" style="border-right: 1px solid black;" >Shop</a>
<a class="gone"></a>
<a class="gone"></a>
<a href="#" class="gone" style="border-left: 1px solid black;" >
<button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button" class="gone"></button>
</a>
<a href="#" class="gone" style="border-left: 1px solid black;" >Eng</a>
</nav>
<div class="notice" style="border-top: 1px solid black; border-bottom: 1px solid black;" >Space for Notice</div>
</header>
<!--전시 컬러칩-->
<div a href="#" style="display: none; background: #6d97b4;" class="random" ></div>
<div a href="#" style="display: none; background: #c9656f;" class="random" ></div>
<div a href="#" style="display: none; background: #f1eb40;" class="random" ></div>
<div a href="#" style="display: none; background: #00825c;" class="random" ></div>
<div a href="#" style="display: none; background: #009ce0;" class="random" ></div>
<div a href="#" style="display: none; background: #cee4a6;" class="random" ></div>
</div>
<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
const right = Math.floor(Math.random() * (width - 30) + 1) + "px";
box.style.top = top;
box.style.right = right;
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
//draggable
function mouseDown(downEvent) {
var box = downEvent.srcElement;
var offX = box.getBoundingClientRect().left - downEvent.x;
var offY = box.getBoundingClientRect().top - downEvent.y;
document.onmousemove = e => {
box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
}
document.onmouseup = e => {
document.onmousemove = document.onmouseup = null;
}
return false;
}
Array.from(boxes).forEach(box => {
box.onmousedown = mouseDown;
})
//호버 혹은 클릭 시, div 컬러 변화
$(".music").hover(
function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
}
);
$(".music").click(function() {
$('#result').load('album_list_index.php');
$(".music").removeClass("active");
$(this).removeClass("hover").addClass("active");
});
</script>
</body>
</html>
暂无答案!
目前还没有任何答案,快来回答吧!