web前端作业（四）

最新推荐文章于 2024-07-20 18:16:53 发布

再卷还是菜

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量102

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/xiaolin_ss/article/details/140534866

版权

点击图片改变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to Change Image Color</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .red {
            filter: hue-rotate(0deg);
        }
        .green {
            filter: hue-rotate(120deg);
        }
        .yellow {
            filter: hue-rotate(60deg);
        }
    </style>
</head>
<body>
    <img id="myImage" src="../作业/官网.png" alt="Your Image">

    <script>
        $(document).ready(function() {
            $("#myImage").click(function() {
                var currentClass = $(this).attr('class');
                if (currentClass === 'red') {
                    $(this).removeClass('red').addClass('green');
                } else if (currentClass === 'green') {
                    $(this).removeClass('green').addClass('yellow');
                } else if (currentClass === 'yellow') {
                    $(this).removeClass('yellow').addClass('red');
                } else {
                    $(this).addClass('red');
                }
            });
        });
    </script>
</body>
</html>

点击渐变颜色方向变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色渐变方向变换</title>
    <style>
        #background {
            width: 1600px;
            height: 1000px;
            background: linear-gradient(to right, red, blue);
        }
    </style>
</head>
<body>
    <div id="background"></div>
    <script>
        const background = document.getElementById('background');
        let gradientDirection = 'to right';

        background.addEventListener('click', () => {
            if (gradientDirection === 'to right') {
                gradientDirection = 'to left';
            } else {
                gradientDirection = 'to right';
            }
            background.style.background = `linear-gradient(${gradientDirection}, red, blue)`;
        });
    </script>
</body>
</html>