按钮实现div块移动 div设置滑动

按钮实现div块移动的方法可以通过JavaScript来实现。我们需要为按钮添加一个点击事件，当按钮被点击时，我们可以通过修改div的样式来实现移动效果。

示例代码如下：

HTML部分：

<div id="myDiv" style="position: relative; left: 0; top: 0; width: 100px; height: 100px; background-color: red;"></div>
<button id="myButton">移动</button>

JavaScript部分：

var myDiv = document.getElementById("myDiv");
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  myDiv.style.left = "100px";
  myDiv.style.top = "100px";
});

在这个示例中，我们首先定义了一个div元素，它的id为"myDiv"，并设置了一些初始样式，比如宽度、高度和背景颜色。然后，我们定义了一个按钮，它的id为"myButton"，用于触发移动效果。

在JavaScript部分，我们通过`document.getElementById`方法获取到了div和按钮的引用，并使用`addEventListener`方法为按钮添加了一个点击事件。当按钮被点击时，事件处理函数中的代码会被执行。

在事件处理函数中，我们使用`style`属性来修改div的样式。通过设置`left`属性和`top`属性，我们可以改变div的位置。在这个示例中，我们将div向右下方移动了100个像素。

除了直接设置样式属性，我们还可以使用CSS动画来实现更流畅的移动效果。通过添加CSS类，并使用`classList`属性的`add`和`remove`方法来切换类，我们可以触发CSS动画效果。

示例代码如下：

HTML部分：

<style>
  .move {
    animation: moveAnimation 1s forwards;
  }
  @keyframes moveAnimation {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(100px, 100px);
    }
  }
</style>
<div id="myDiv" style="position: relative; left: 0; top: 0; width: 100px; height: 100px; background-color: red;"></div>
<button id="myButton">移动</button>

JavaScript部分：

var myDiv = document.getElementById("myDiv");
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  myDiv.classList.add("move");
  setTimeout(function() {
    myDiv.classList.remove("move");
  }, 1000);
});

在这个示例中，我们首先定义了一个CSS样式，其中包含了一个名为"move"的类。这个类定义了一个名为"moveAnimation"的动画，它会在1秒钟内将div移动到指定位置。我们通过`animation`属性将动画应用到div上。

在JavaScript部分，我们使用`classList`属性的`add`方法将"move"类添加到div的类列表中，从而触发CSS动画。为了在动画结束后恢复div的初始位置，我们使用`setTimeout`方法在1秒钟后执行一个匿名函数，该函数通过`classList`属性的`remove`方法将"move"类从div的类列表中移除。

通过上述示例代码，我们可以实现通过按钮来移动div块的效果。这种方法可以通过JavaScript来控制div的样式，从而实现各种复杂的移动效果。我们还可以结合CSS动画来实现更加流畅和生动的效果，提升用户体验。