如何使用按鈕更改圖像顏色，而無需使用360個不同的css圖紙？

-1

我想更改圖像的顏色。圖像中有多種顏色，所以色調旋轉css濾鏡看起來非常棒，而且完全像我想要的（鏈接到色調旋轉示例的http://www.html5rocks.com/en/tutorials/filters/understanding-css/）。我希望能夠通過單擊按鈕來改變單個圖像的顏色 - 它會將角度增加1 *（或在360 *時設置爲0），稍微改變圖像顏色。如何使用按鈕更改圖像顏色，而無需使用360個不同的css圖紙？

雖然我可以爲每個學位製作一份樣式表，但這是非常不切實際的。在同一頁面上有幾百張圖片需要同樣的效果，這意味着......如果我不希望它們一起改變，那麼就是很多單獨的樣式表。我一直無法使用谷歌找到任何答案。

TL; DR想要使用Web瀏覽器中的按鈕旋轉圖像的色調。

來源

2012-12-12 user1896606

這就是爲什麼元素可以以編程方式應用*個別*樣式的原因。 'jQuery.css（..）'或'elm.style'。（另外，如果相同的樣式仍然需要統一應用於「元素類」，那麼現在可以動態操作樣式表類規則。） – 2012-12-12 04:23:39

儘管如此，仍然需要360個樣式表。我需要一個可能的程度的樣式表。 – user1896606

不，它不會。再次參考我的第一條評論。如果它*是需要單獨的樣式表來應用任何CSS樣式/值/轉換的情況，那麼在整個屏幕上移動圖像將需要每個位置一個樣式表。當然，這是不切實際的，並非如此。設置CSS色調轉換值和設置位置（本身是轉換的一種形式）或背景顏色之間沒有區別。 – 2012-12-12 06:09:51

這可以很容易地使用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-12 06:28:07

如何使用按鈕更改圖像顏色，而無需使用360個不同的css圖紙？

回答

相關問題