一.改变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试4</title>
<script src="../04.jq/JQuery.js"></script>
<style>
.original-color {
filter: grayscale(0%);
}
.changed-color {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img id="myImage" src="../01.html/1.3块级和行内标签/53a975421f45e5146e99f4af701bbb14_504520381810307233.jpg" class="original-color" alt="Sample Image">
<script>
$(document).ready(function(){
$("#myImage").click(function(){
$(this).toggleClass("changed-color");
});
});
</script>
</body>
</html>改变前:
点击改变后:
二. 渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试5</title>
<style>
body {
background: linear-gradient(to bottom, red, yellow);
transition: background 0.5s;
}
</style>
</head>
<body>
<script>
var gradientDirections = ['to bottom', 'to top', 'to right', 'to left', 'to bottom right', 'to bottom left', 'to top right', 'to top left'];
var currentDirectionIndex = 0;
function changeGradientDirection() {
currentDirectionIndex = (currentDirectionIndex + 1) % gradientDirections.length;
var newDirection = gradientDirections[currentDirectionIndex];
document.body.style.background = 'linear-gradient(' + newDirection + ', red, yellow)';
}
document.body.addEventListener('click', changeGradientDirection);
</script>
</body>
</html>
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
