javascript onclick淡入淡出div(短代码)

JavaScript onclick淡入淡出div是一种常见的前端开发技术，用于实现点击事件触发时，使一个div元素以淡入或淡出的效果显示或隐藏。

具体实现方法如下：

HTML代码：

<div id="myDiv" style="display: none;">
  这是要淡入淡出的内容
</div>
<button onclick="fadeToggle()">点击触发</button>

JavaScript代码：

function fadeToggle() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    fadeIn(div);
  } else {
    fadeOut(div);
  }
}

function fadeIn(element) {
  var op = 0.1;  // 初始透明度为0.1
  element.style.display = "block";
  var timer = setInterval(function () {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = "alpha(opacity=" + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}

function fadeOut(element) {
  var op = 1;  // 初始透明度为1
  var timer = setInterval(function () {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = "none";
    }
    element.style.opacity = op;
    element.style.filter = "alpha(opacity=" + op * 100 + ")";
    op -= op * 0.1;
  }, 10);
}

以上代码实现了一个点击按钮触发淡入淡出效果的div。点击按钮时，通过调用fadeToggle函数判断div元素的显示状态，如果是隐藏的，则调用fadeIn函数使其淡入显示；如果是显示的，则调用fadeOut函数使其淡出隐藏。

这种效果常用于网页中的弹出框、提示信息等交互效果的实现。

腾讯云相关产品和产品介绍链接地址：