<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../code/04.jq/JQuery.js"></script>
<style>
img{
filter: grayscale(100%);
transition: filter 0.5s ease;
}
img.color {
filter: none;
}
</style>
</head>
<body>
<img src="../code/云边有个小卖部.jpg" alt="image" id="image">
</body>
</html>
<script>
$("#image").click(function (){
$(this).toggleClass("color");
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
width: 100vw;
background: linear-gradient(to top left, red, blue);
transition: background 0.5s ease;
}
</style>
</head>
<body onclick="changeGradient()">
</body>
</html>
<script>
let directions = ['to top left', 'to bottom right', '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]}, red, blue)`;
}
</script>
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
