JavaScript

最新推荐文章于 2024-08-15 08:55:57 发布

Dreamboat¿

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量171

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80632958/article/details/140533378

版权

点击图片变换图片颜色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片变换颜色</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img {
            width: 800px;
            height: 800px;
            transition: filter 0.5s;
        }
    </style>
    <script>
        $(document).ready(function() {
            let isColored = false;
            $('#changeColor').click(function() {
                if (isColored) {
                    $(this).css('filter', 'none');
                } else {
                    $(this).css('filter', 'grayscale(100%)');
                }
                isColored = !isColored;
            });
        });
    </script>
</head>
<body>
    <img id="changeColor" src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0219%2Fc43c3d3dj00s930uu002sd000xs00zop.jpg&thumbnail=660x2147483647&quality=80&type=jpg" alt="图片">
</body>
</html>

点击前

点击后

点击背景颜色渐变方向转变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色渐变方向变换</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.5s;
        }
    </style>
</head>
<body>
    <script>
        let direction = 'to right';

        document.body.addEventListener('click', function() {
            if (direction === 'to right') {
                direction = 'to left';
            } else if (direction === 'to left') {
                direction = 'to top';
            } else if (direction === 'to top') {
                direction = 'to bottom';
            } else {
                direction = 'to right';
            }

            document.body.style.background = `linear-gradient(${direction}, #ff9a9e, #fad0c4)`;
        });
        document.body.style.background = `linear-gradient(${direction}, #ff9a9e, #fad0c4)`;
    </script>
</body>
</html>

点击前