jQuery点击图片变换图片颜色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击图片变换颜色和背景</title>
<style>
body {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.movie img {
width: auto;
height: auto;
max-width: 100%;
border: 2px solid transparent;
display: block;
}
.clicked img {
filter: grayscale(100%);
}
.clicked {
background-color: white !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.movie img').click(function() {
$('body').toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="movie">
<img src="https://wework.qpic.cn/wwpic3az/183340_vLg3FNjEQaOWP7Q_1721227679/0" alt="电影海报">
</div>
</body>
</html>
页面展示:
变换后:
JavaScript中的DOM操作完成背景颜色渐变方向切换:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Background Gradient</title>
<style>
body {
height: 100vh;
margin: 0;
transition: background 0.5s ease;
background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 初始背景渐变方向 */
}
</style>
</head>
<body>
<script>
// 获取 body 元素
const body = document.body;
// 定义渐变方向数组
const gradients = ['90deg', '180deg', '270deg', '0deg'];
// 定义渐变颜色数组
const colors = [
['#ff7e5f', '#feb47b'],
['#ff9a9e', '#fad0c4'],
['#a18cd1', '#fbc2eb'],
['#f6d365', '#fda085']
];
let currentIndex = 0;
// 添加点击事件监听器
body.addEventListener('click', () => {
// 更新渐变方向的索引
currentIndex = (currentIndex + 1) % gradients.length;
// 获取当前的渐变方向和颜色
const gradientDirection = gradients[currentIndex];
const gradientColors = colors[currentIndex];
// 设置新的背景渐变方向和颜色
body.style.background = `linear-gradient(${gradientDirection}, ${gradientColors.join(', ')})`;
});
</script>
</body>
</html>
页面展示: