我正在尝试设置我的 Java 脚本,以便我可以一次又一次地从屏幕的顶部到底部设置一个对象的动画,调用不同的项目随机落下。现在我无法弄清楚让其中一个物体掉落。
我已经尝试通过我的 CSS 通过 Java 脚本添加 css,但我不确定这是最好的选择。
function myMove() {
var elem = document.getElementsByClassName("boxcontainer");
var pos = 0;
var id = setInterval(frame, 725);
function frame() {
if (pos == 725) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "25px";
}
}
}
elem.addEventListener("mousedown", function turnTetrisleft() {
switch (keycode) {
case Key.LEFT:
elem.style.transform.rotateX() += 90 + "deg";
break;
case Key.RIGHT:
elem.style.transform.rotateX() -= 90 + "deg";
break;
default:
elem.style.transform.rotateX() += "";
}
});
.boxcontainer {
position: absolute;
left: 750px;
top: 25px;
width: 50px;
height: 50px;
}
<div class="tetris-display">
<div class="tetris-item">
<div class="boxcontainer">
<div class="block">
<div class="innerblock block"></div>
</div>
<div class="block">
<div class="innerblock block"></div>
</div>
<div class="block box">
<div class="innerblock block"></div>
</div>
<div class="block box">
<div class="innerblock block"></div>
</div>
</div>
</div>
我看不到任何事情发生。我有几个关于括号的错误,但目前我看不到任何错误
在您的turnTetrisleft
函数中,您引用了所有元素,而不是当前单击的元素。
像这样的事情可能会奏效:
elem.addEventListener("mousedown", function turnTetrisleft(event) {
switch (keycode) {
case Key.LEFT:
event.target.style.transform.rotateX() += 90 + "deg";
break;
case Key.RIGHT:
event.target.style.transform.rotateX() -= 90 + "deg";
break;
default:
event.target.style.transform.rotateX() += "";
}
});
注意event
和event.target
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句