当前位置: 首页> 科技> IT业 > html--图片变化

html--图片变化

时间:2025/7/11 23:12:49来源:https://blog.csdn.net/2301_81140745/article/details/140570143 浏览次数:2次

目标效果:
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>

图片效果

点击图片后变化

关键字:html--图片变化

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: