改變顏色動態

Question

我在一個快速的網站的想法工作，我希望有活力的顏色，我知道我可以用CSS代碼做到這一點：

.col-rotation { 
    -webkit-filter:hue-rotate(20deg); 
} 

我有一個滑塊如下

<input type="slider" id="slider" min="0" max="360" value="0"> 

，我使用jquery，試圖與它

$("#slider").change(function() { 
      val = $("#slider").val(); 
      $(".col-rot").css("-webkit-filter":"hue-rotate("+val+"deg);"); 
     }); 

沒有MA來改變顏色tter我試圖改變在這裏，我似乎無法改變頁面上的顏色..任何提示？

Answer 1

您的代碼中存在一些錯誤。 滑塊的設置不正確。 還有其他的語法問題。

看到下面的工作

HTML例如：

<div id="slider" min="0" max="360" value="0"></div> 

CSS：

.col-rot { 
width:100px; 
height:400px; 
border:1px solid black; 
background:red; 
-webkit-filter: hue-rotate(90deg); 

}

JS：

$('#slider').slider({ 
slide: function (even, ui) { 
    debugger; 
    $(".col-rot").css("-webkit-filter", "hue-rotate(" + ui.value + "deg)"); 
} 

}); 

fidde：http://jsfiddle.net/dDSAL/