-1

画像の色を変更したい。画像には複数の色があるため、hue-rotate css フィルターはすばらしく、私が望むものとまったく同じように見えます ( http://www.html5rocks.com/en/tutorials/filters/understanding-css/ hue- へのリンク回転例）。ボタンをクリックして個々の画像の色を変更できるようにしたいと思います。角度を 1* 増やして (または 360* でゼロに設定して)、画像の色をわずかに変更します。

個々の学位ごとにスタイル シートを作成することはできますが、非常に非現実的です。同じページに数百の画像があり、その効果も必要です。つまり、一緒に変更したくない場合は、たくさんの個別のスタイルシートが必要です。Googleを使用して答えを見つけることができませんでした。

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 に答える