<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换颜色</title>
<style>
#image-to-change {
width: 200px;
height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<img id="image-to-change" src="img.jpg" alt="Changeable Image">
<script>
$(document).ready(function(){
var colors = ['red', 'blue', 'green', 'yellow'];
var currentIndex = 0;
$('#image-to-change').click(function(){
currentIndex = (currentIndex + 1) % colors.length;
$(this).css('filter', 'hue-rotate(' + (currentIndex * 90) + 'deg)');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title变幻颜色</title>
<style>
#gradient-container {
width: 100%;
height: 300px;
background: linear-gradient(to right, red, blue,yellow);
transition: background 0.6s ease;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gradient-container"></div>
<script>
let directions = ['to right', 'to left', 'to top', 'to bottom'];
let currentIndex = 0;
document.getElementById('gradient-container').addEventListener('click', function() {
currentIndex = (currentIndex + 1) % directions.length;
this.style.background = `linear-gradient(${directions[currentIndex]}, red, blue)`;
});
</script>
</body>
</html>
1166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
