从表单中选择选项时更改图像不透明度

原创

沧州虎王科技 2024-09-02 11:37:39 ©著作权

文章标签 ci html 示例代码 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者沧州虎王科技的原创作品，请联系作者获取转载授权，否则将追究法律责任

你可以使用 JavaScript 来实现这个功能。以下是一个示例代码：

<!DOCTYPE html>
<html>

<body>

  <form>
    <select id="mySelect" onchange="changeOpacity()">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </form>

  <img id="myImage" src="image.jpg" style="opacity: 1;">

  <script>
    function changeOpacity() {
      var select = document.getElementById("mySelect");
      var value = select.value;

      if (value == 1) {
        document.getElementById("myImage").style.opacity = 0.5;
      } else if (value == 2) {
        document.getElementById("myImage").style.opacity = 0.7;
      } else if (value == 3) {
        document.getElementById("myImage").style.opacity = 1;
      }
    }
  </script>

</body>

</html>

在这个示例中，我们使用 onchange 事件来监听选择框的变化。当选择框的值发生变化时，我们会调用 changeOpacity 函数。在 changeOpacity 函数中，我们根据选择框的值来设置图像的不透明度。