如何获得具有多个案例的动画函数,这些案例控制 Javascript 中的 CSS 值以进行渲染?

扎卡里·布鲁姆斯坦

我正在尝试设置我的 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() += "";
  }
});

注意eventevent.target

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

swift枚举在单个开关案例中获得具有相同参数的多个案例的关联值

如何从 JavaScript 调整 CSS 中的值?

在Swift中枚举多个具有相同值的案例

在JavaScript中触发CSS动画

javascript / css中的顺序动画

批量更新跨多个元素的 Javascript 中的 CSS 值?

如何在纯JavaScript中获取CSS属性值

计算R中多个单独案例的单个案例中两个观察值之间的差异

Rails4通过控制器中的CSS ID进行渲染

在JavaScript中具有多个值的isNaN()函数

如何修复 [object Object] 并从 Javascript 中的多个关系进行渲染?

根据JavaScript中的值设置CSS样式

将CSS值存储在JavaScript变量中

在Haskell中,如何在替换中应用多个案例?

JavaScript Switch语句-单个案例中的同义词

如何修复“在Magento的首屏内容中消除阻止渲染的JavaScript和CSS

是否可以在scala中具有不同名称和略有不同的字段的两个案例类之间进行转换

如何在R中创建一个新变量,如果一个案例缺少一个值而另一个变量具有一个观察到的值,则返回1?

javascript如何提醒CSS值?

在 K-NN 中如何显示用于进行正确预测的 k 个案例集

在java中读取CSV文件并检索处理所有n个案例的值

如何通过Javascript中的值对关联数组进行排序?

如何避免在JavaScript中对敏感值进行硬编码?

如何按对象javascript中的键对值进行分组

如何根据值在javascript中对Hashmap进行排序

这些值在CSS中如何优先?

在一个案例中有多个选项,然后在案例中循环

MATLAB:在 switch 中运行多个案例

如何有效地将CSS值导入到javascript文件中?