web前端图片变色与背景渐变

最新推荐文章于 2024-07-25 09:24:40 发布

电信2301 lzr睿

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量172

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2301_80943978/article/details/140643087

版权

1.使用Jquery完成点击图片变换图片颜色
2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片变色与背景渐变</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(90deg, #ff7e5f, #feb47b);
            transition: background 0.5s ease;
        }
        .image-container {
            cursor: pointer;
        }
        img {
            width: 200px;
            height: auto;
            transition: filter 0.5s ease;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="image-container">
    <img id="myImage" src="https://via.placeholder.com/200" alt="示例图片">
</div>

<script>
    // 点击图片变换颜色
    $(document).ready(function() {
        let colorFilter = 0;
        $('#myImage').click(function() {
            colorFilter = (colorFilter + 1) % 3; // 循环变换颜色
            switch (colorFilter) {
                case 0:
                    $(this).css('filter', 'none'); // 原始颜色
                    break;
                case 1:
                    $(this).css('filter', 'sepia(1)'); // 棕褐色
                    break;
                case 2:
                    $(this).css('filter', 'grayscale(1)'); // 灰度
                    break;
            }
        });
    });

    // 点击背景改变渐变方向
    let angle = 90; // 初始渐变方向
    document.body.addEventListener('click', function() {
        angle = (angle + 90) % 360; // 每次点击顺时针旋转90度
        this.style.background = `linear-gradient(${angle}deg, #ff7e5f, #feb47b)`;
    });
</script>

</body>
</html>

运行结果：