屏幕中间有一条线。以这条线为中心,应该有一个矩形,我可以在某个事件中更改其位置和大小(例如单击它)。更改矩形的X位置后,它始终需要完全显示在屏幕上,我至少需要更改至少30像素。
这是我当前的代码:
<html>
<head>
<title>B1</title>
<style type="text/css">
.line {
position:absolute;
top:50%;
width:100%;
height:1px;
background:black;
}
.rectangle {
position:absolute;
top: 50%;
left: 80%;
width: 200px;
height: 100px;
margin: 0 auto;
background: red;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeRec() {
var elementStyle = document.getElementById("rectangle").style;
var newX = (Math.random() * window.screen.availWidth - 30) + 30;
if (newX > window.screen.availWidth - document.getElementById("rectangle").clientWidth) {
newX = window.screen.availWidth - document.getElementById("rectangle").clientWidth;
newX;
}
elementStyle.position = "relative";
}
document.onkeydown = onKey;
function onKey(e) { if (e == null) {
e = window.event;
}
switch (e.which || e.charCode || e.keyCode) {
case 32:
// space
changeRec();
break;
case 65: // a
break;
case 66:
// b
}
}
</script>
<hr class="line">
<div class="rectangle" id="rectangle" ></div>
我有两个问题:
矩形不在Y轴的线上居中,因为高度应该是可变的,所以我不能只设置固定的边距。
我的changeRec()方法无法正常工作。有时,它将X位置设置为屏幕之外的值。
我对JS,CSS和HTML还是很陌生,因此可以提供任何帮助,
最佳答案
因此,我摆弄了您的代码,并使其正常工作。这是您似乎遇到的问题:
矩形的垂直对齐
实现这种垂直对齐的一种解决方案是使用transform:translateY,如下所示:
top:50%;
transform:translateY(-50%);
但是由于某种原因,我希望有人比我更聪明地解释,为使矩形正确居中,我使用了translateY(-43%)。也许关于hRules有点奇怪...
编辑:这确实是因为hr及其边距。我将其边距设置为0,并且translateY(-50%)按预期工作。
至于移动Rect问题,有几个问题:
正如人们在评论中所说,要选择矩形,您需要使用:
document.getElementsByClassName("rectangle")[0]
我想,尽管您的编辑不再需要。
在您的代码中,此行:
var newX = (Math.random() * window.screen.availWidth - 30) + 30;
为什么是-30?矩形的宽度为200像素。另外,-30应与availWidth一起放在括号中。为了下面的代码段,我将availWidth更改为document.body.clientWidth以解决iFrame问题。因此,我们有:
var newX = (Math.random() * (document.body.clientWidth -200));
同样,您也无缘无故将矩形的位置更改为相对位置。我刚刚删除了。
最后,为矩形赋予样式新的左值时,请不要忘记添加“ px”。
无论如何,这是一个有效的代码段:
function changeRec() {
var elementStyle = document.getElementsByClassName("rectangle")[0].style;
var newX = (Math.random() * (document.body.clientWidth -200));
elementStyle.left = newX+"px";
}
document.onkeydown = onKey;
function onKey(e) { if (e == null) {
e = window.event;
}
switch (e.which || e.charCode || e.keyCode) {
case 32:
// space
changeRec();
break;
case 65: // a
break;
case 66:
// b
}
}
.line {
position:absolute;
top:50%;
width:100%;
height:1px;
margin:0px;
background:black;
}
.rectangle {
position:absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
width: 200px;
height: 100px;
background: red;
}
<hr class="line">
<div class="rectangle"></div>