RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1142114
Accepted
De.Minov
De.Minov
Asked:2020-06-17 16:32:38 +0000 UTC2020-06-17 16:32:38 +0000 UTC 2020-06-17 16:32:38 +0000 UTC

向拐角方向移动

  • 772

有这样的代码

let wW = $(window).width(),
    wH = $(window).height(),
    mS = 50; // длина "движения" блока (px)
    
function Start() {
  let pX = Math.floor(Math.random() * wW),
      pY = Math.floor(Math.random() * wH),
      dR = Math.floor(Math.random() * 360);
  
  $('.el').css({
    'left': pX+'px',
    'top': pY+'px',
    'transform': `rotate(${dR}deg)`
  });
  
} Start();
.el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
}

.el::after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="el"></div>

此代码设置元素的随机位置和旋转角度。

问题是:

mS如何使块相对于给定方向(变量)移动第 n 个像素(变量dR)?

javascript
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Давид Манжула
    2020-06-17T17:08:47Z2020-06-17T17:08:47Z

    您可以在 CSS 中添加多个转换。例如,transfom: translateX(10px) rotate(10deg) translateY(5px);- 将依次执行转换。

    我将举一个相当笨拙的例子,然后是这样的:

    let wW = $(window).width(),
      wH = $(window).height(),
      mS = 50; // длина "движения" блока (px)
    
    function Start() {
      // Тут я исправил чтоб квадрат не спавнился близко к краям
      let pX = 100 + Math.floor(Math.random() * (wW - 200)),
        pY = 100 + Math.floor(Math.random() * (wH - 200)),
        dR = Math.floor(Math.random() * 360);
    
      $('.el').css({
        'left': pX + 'px',
        'top': pY + 'px',
        'transform': `rotate(${dR}deg)`
      });
    
      setTimeout(() => {
        $('.el').css({
          'transform': `rotate(${dR}deg) translateY(${mS}px)`
        });
      }, 1000);
    
      setTimeout(() => {
        $('.el').css({
          'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg)`
        });
      }, 2000);
    
      setTimeout(() => {
        $('.el').css({
          'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg) translateY(${mS}px)`
        });
      }, 3000);
    
    }
    Start();
    .el {
      width: 20px;
      height: 20px;
      background: red;
      position: fixed;
      transition: transform 0.5s;
    }
    
    .el::after {
      content: '';
      display: block;
      width: 2px;
      height: 10px;
      background: black;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -100%);
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div class="el"></div>

    • 1
  2. Best Answer
    user355286
    2020-06-17T17:08:55Z2020-06-17T17:08:55Z

    如果你只需要做一次动作,那么你可以不循环。并且要小心中间的破折号,因为它我坐了 20 分钟,却不明白为什么正方形不会那样旋转)

    const angle = Math.random() * Math.PI*2
    const dist = 100
    el.style.setProperty('--rz', angle + 'rad')
    
    
    const x = Math.cos(angle) * dist
    const y = Math.sin(angle) * dist
    
    setTimeout(() => {
      el.style.setProperty('--tx', x + 'px')
      el.style.setProperty('--ty', y + 'px')
    }, 0)
    #el {
      width: 20px;
      height: 20px;
      background: red;
      position: fixed;
      top: 50%;
      left: 50%;
      transition: 1s;
      transform: translate(var(--tx), var(--ty)) rotate(var(--rz));
    }
    
    #el::after {
      content: '';
      display: block;
      width: 10px;
      height: 2px;
      background: black;
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translate(0, -50%);
    }
    <div id="el" style="--rz: 0deg; --tx: 0px; --ty: 0px"></div>

    • 1

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5