-1

我想改变图像的颜色。图像中有多种颜色，因此 hue-rotate css 过滤器看起来很棒，令人惊叹，完全符合我的要求（http://www.html5rocks.com/en/tutorials/filters/understanding-css/链接到 hue-旋转示例）。我希望能够通过单击按钮来更改单个图像的颜色——它将角度增加 1*（或在 360* 处设置为零），稍微改变图像颜色。

虽然我可以为每个单独的学位制作一个样式表，但这非常不切实际。同一页面上有数百个图像也需要具有这种效果，这意味着......如果我不希望它们一起更改，则需要大量单独的样式表。我无法使用谷歌找到任何答案。

TL;DR 想要使用 Web 浏览器中的按钮来旋转图像的色调。

4

1 回答 1

0

这可以使用 jquery 轻松完成。

假设您的图像是：

    <img src="yourimage.jpeg" id="myimage"/>

你有一个按钮：

    <button id="mybutton">Hue Rotator</button>

现在在您的页面中，您需要在脚本中包含 jquery.js。

一点点脚本就可以完成剩下的工作。

    <script type="text/javascript>
    $(document).ready(function(){

            var degree = 0;

            var rotatehue = function(){
                    degree++;
                    if(degree>360)degree=0;
                    $('#myimage').css('-webkit-filter','hue-rotate('+degree+'deg)');
            }

            $('#mybutton').bind('click',function(){
                    window.setInterval(rotatehue,30);
            });

    });
    </script>

现在单击按钮，您的图像应该开始旋转色调。

于 2012-12-12T06:28:07.470 回答