巧用JavaScript，实现多姿多彩的按钮效果

2024-01-08 17:48:59

改变按钮颜色
这是最简单也是最常用的按钮效果。当鼠标悬停在按钮上时，按钮的颜色会发生改变。这种效果可以吸引用户的注意力，并使按钮更加醒目。

// 获取按钮元素
const button = document.getElementById("myButton");

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", () => {
  // 将按钮颜色设置为红色
  button.style.backgroundColor = "red";
});

// 添加鼠标离开事件监听器
button.addEventListener("mouseout", () => {
  // 将按钮颜色设置为默认值
  button.style.backgroundColor = "#007bff";
});

2. 按钮放大缩小

当鼠标悬停在按钮上时，按钮会放大一点。这种效果可以使按钮更加醒目，并增加用户交互性。

// 获取按钮元素
const button = document.getElementById("myButton");

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", () => {
  // 将按钮放大1.2倍
  button.style.transform = "scale(1.2)";
});

// 添加鼠标离开事件监听器
button.addEventListener("mouseout", () => {
  // 将按钮缩小到默认大小
  button.style.transform = "scale(1)";
});

3. 按钮抖动

当鼠标悬停在按钮上时，按钮会抖动一下。这种效果可以引起用户的注意，并增加按钮的趣味性。

// 获取按钮元素
const button = document.getElementById("myButton");

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", () => {
  // 将按钮向左抖动5像素
  button.style.transform = "translateX(-5px)";

  // 延迟100毫秒后，将按钮向右抖动5像素
  setTimeout(() => {
    button.style.transform = "translateX(5px)";
  }, 100);

  // 再延迟100毫秒后，将按钮恢复到默认位置
  setTimeout(() => {
    button.style.transform = "translateX(0)";
  }, 200);
});

4. 按钮旋转

当鼠标悬停在按钮上时，按钮会旋转一定角度。这种效果可以使按钮更加醒目，并增加用户的交互性。

// 获取按钮元素
const button = document.getElementById("myButton");

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", () => {
  // 将按钮旋转45度
  button.style.transform = "rotate(45deg)";
});

// 添加鼠标离开事件监听器
button.addEventListener("mouseout", () => {
  // 将按钮旋转回默认角度
  button.style.transform = "rotate(0deg)";
});

5. 按钮位移

当鼠标悬停在按钮上时，按钮会向某个方向位移。这种效果可以使按钮更加醒目，并增加用户的交互性。

// 获取按钮元素
const button = document.getElementById("myButton");

// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", () => {
  // 将按钮向下位移10像素
  button.style.transform = "translateY(10px)";
});

// 添加鼠标离开事件监听器
button.addEventListener("mouseout", () => {
  // 将按钮恢复到默认位置
  button.style.transform = "translateY(0)";
});