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);");
        });

无论我在这里尝试改变什么，我似乎无法改变页面上的颜色..任何提示？

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/

动态更改网页元素的颜色

1 个答案: