用js写，在一个盒子里面再放一个盒子，里面的盒子沿着外面盒子边缘运动

你可以使用CSS的position属性和transform属性实现这个效果。首先，将外层盒子设置为position: relative，内层盒子设置为position: absolute。然后，在内层盒子的CSS样式中，设置left和top值为0，表示内层盒子与外层盒子的左上角对齐。接着，使用JavaScript监听外层盒子的mousemove事件，并根据鼠标位置计算内层盒子应该移动的left和top值，然后设置内层盒子的transform属性，使其沿着外层盒子的边缘运动即可。

相关问题

在一个盒子里面再放一个盒子，里面的盒子沿着外面盒子边缘运动，用js写

下来该怎么实现？

您好！很高兴为您解答问题。针对您的问题，可以使用JavaScript中的CSS3动画来实现盒子的移动效果。具体代码实现如下：

HTML代码：

<div class="box1">
  <div class="box2"></div>
</div>

CSS代码：

.box1 {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

解释一下上面的代码。首先，在HTML代码中，我们创建了两个div元素，分别是.box1和.box2，其中.box2为.box1的子元素。.box1表示外层盒子，样式设置overflow: hidden用于隐藏子元素的溢出部分。.box2表示内层盒子，样式设置position: absolute用于定位元素，以便实现动画效果。另外，我们给.box2元素设置了名为move的动画。

接下来，我们给.box2元素设置了一个名为move的动画。关于CSS3动画的使用方法可以参考这里。具体来说，我们在@keyframes中定义了动画的关键帧，0%表示动画的开始时间，100%表示动画的结束时间。在这个动画中，我们让.box2元素沿着外层盒子的边缘做一个圆形运动。具体来说，我们首先将元素的top和left都设为0，表示元素位于外层盒子的左上角。后面的25%时间内，我们将元素的left设置为100%，相当于将元素移动到了外层盒子的右边，但是顶部仍然在外层盒子的顶部不动。以此类推，在不同的时间内设置不同的top和left值，即可实现沿着边缘运动的效果。

最后，我们将.box2元素设置为无限循环动画，即animation: move 5s linear infinite;。其中，5s表示动画的持续时间，线性（linear）表示动画的速度为“匀速运动”，infinite表示动画循环无限次数。

希望能够帮助到您！

帮我写一个js点击按钮一个盒子消失，另一个盒子出现用onclick 还有opacity

好的，以下是一个简单的实现：

首先，我们需要在 HTML 中添加两个盒子，一个是需要消失的盒子，一个是需要出现的盒子。并且我们需要给它们设置一个共同的类名，以方便在 JavaScript 中进行操作。比如：

<div class="box to-hide">这是需要消失的盒子</div>
<div class="box to-show">这是需要出现的盒子</div>
<button onclick="toggleBox()">点击这里</button>

接着，我们可以在 JavaScript 中编写 `toggleBox` 函数，用 `onclick` 事件来触发。该函数需要做的事情是，当按钮被点击时，将需要消失的盒子的 `opacity` 值设置为 0，同时将需要出现的盒子的 `opacity` 值设置为 1。代码如下：

function toggleBox() {
  var toHide = document.querySelector('.to-hide');
  var toShow = document.querySelector('.to-show');
  toHide.style.opacity = 0;
  toShow.style.opacity = 1;
}

当然，如果你需要在多次点击按钮时来回切换这两个盒子的显示状态，可以使用以下代码：

function toggleBox() {
  var toHide = document.querySelector('.to-hide');
  var toShow = document.querySelector('.to-show');
  if (toHide.style.opacity === '0') {
    toHide.style.opacity = 1;
    toShow.style.opacity = 0;
  } else {
    toHide.style.opacity = 0;
    toShow.style.opacity = 1;
  }
}

这样，每次点击按钮时，就会交替显示和隐藏这两个盒子了。