1.使用Jquery完成点击图片变换图片颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业4.1</title>
<script src="../考试/JQuery.js"></script>
<head>
<script>
$(document).ready(function(){
$('#change-color-image').click(function(){
// 改变图片颜色
$(this).css('filter', 'hue-rotate(120deg)');
});
});
</script>
</head>
<body>
<img id="change-color-image" src="./R-C.jpgs" alt="Image">
</body>
</html>
2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业4.2</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #5f9cff, #15367d);
transition: background 0.5s ease;
}
</style>
</head>
<body>
<script>
var gradientDirection = 'to right';
document.body.addEventListener('click', function() {
gradientDirection = (gradientDirection === 'to right') ? 'to left' : 'to right';
document.body.style.background = 'linear-gradient(' + gradientDirection + ', #5f9cff, #15367d)';
});
</script>
</body>
</html>
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
