web前端

未来的旋律～

已于 2024-07-22 22:27:58 修改

阅读量175

点赞数 1

文章标签：前端

于 2024-07-22 22:26:11 首次发布

本文链接：https://blog.csdn.net/xz15881991074/article/details/140621165

版权

作业1：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="../2.5css动画/JQuery.js"></script>
 <style>
 img {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
 }

  img.color { filter: none;
  }
 </style>
</head>
<body>
 <img src="./img.jpg" alt="img" id="img">
</body>
</html>
<script>
 $("#img").click(function () {
  $(this).toggleClass("color");
   });
</script>

作业2：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
 body {
   height: 100vh;
    width: 100vw;
    background: linear-gradient(to top left, brown, green);
    transition: background 0.5s ease;
   }
 </style>
</head>
<body onclick="changeGradient()">
</body>
</html>
<script>
 let directions = ['to top right', 'to bottom left', 'to top right', 'to bottom left'];
 let currentDirectionIndex = 0;

 function changeGradient() {
 let body = document.body;
 currentDirectionIndex = (currentDirectionIndex + 1) % directions.length;
 body.style.background = `linear-gradient(${directions[currentDirectionIndex]}, brown, green)`;
  }
</script>