1.使用Jquery完成点击图片变换图片颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击图片变换颜色</title>
<style>
#image-container {
position: relative;
display: inline-block;
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 10;
mix-blend-mode: color;
pointer-events: none;
}
</style>
</head>
<body>
<div id="image-container">
< img src="../作业/图片/OIP-C8.jpg" alt="示例图片" id="image">
<div id="color-overlay"></div>
</div>
<script src="../04jq/JQuery.js"></script>
<script>
$(document).ready(function(){
$('#image').click(function(){
$('#color-overlay').css('background-color', 'red');
});
});
</script>
</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>点击改变div背景渐变方向</title>
<style>
.gradient-box {
width: 100%;
height: 600px;
background: linear-gradient(to right, red, yellow);
transition: background 0.5s;
}
</style>
</head>
<body>
<div class="gradient-box" id="gradientBox"></div>
<script>
var gradientBox = document.getElementById('gradientBox');
gradientBox.addEventListener('click', function() {
var style = window.getComputedStyle(this);
var background = style.backgroundImage;
if (background.includes('to right')) {
this.style.backgroundImage = 'linear-gradient(to left, red, yellow)';
} else {
this.style.backgroundImage = 'linear-gradient(to right, red, yellow)';
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
