html--图片变化
目标效果：
1.图片为渐变
2.点击上传图片会有变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: linear-gradient(to right, red, blue);
transition: background 2s;
}
.colorful {
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<body>
<img id="myImage" src="your_image.jpg" alt="Your Image">
</body>
</body>
</html>
<script>
document.body.addEventListener('click', function () {
let currentDirection = getComputedStyle(this).backgroundImage.match(/to\s+(\w+)/)[1];
let newDirection = currentDirection === 'right' ? 'left' : 'right';
this.style.backgroundImage = `linear-gradient(to ${newDirection}, red, blue)`;
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#myImage').click(function () {
$(this).toggleClass('colorful');
});
});
</script>
图片效果
点击图片后变化
原文地址：https://blog.csdn.net/2301_81140745/article/details/140570143
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！