Question

我试图通过在用户加载页面时更改图像上的css-filter hue-rotate属性来为网页赋予狂野和迷幻的天赋。如何让hue-rotate更改？我试图将我的解决方案建立在这个已回答的问题上：How to Cycle Through Background Colors on Hover with jQuery已在此fiddle中得到解答。

    var counter = 0;
var colors = [
    "#eeeeee",
    "#00ff00",
    "#ff0000",
    "#000000"];

var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
    interval = window.setInterval(changeColor, 1000);

}).mouseleave(function () {
    window.clearInterval(interval);
});

function changeColor() {
    var color = colors.shift();
    colors.push(color);
    $div.css({
        "background-color": color
    });

}

但是我没有改变div上的背景颜色，而是试图改变div中图像的色调旋转。是的，我希望它改变onload，而不是onmouseenter。我正在Chrome中进行测试，但Safari也应该可以工作，因为css过滤器已在webkit中实现。

我的尝试，甚至没有尝试合并onload方面：

var counter = 0;
var filters = [
    "hue-rotate(99deg)",
    "hue-rotate(22deg)",
    "hue-rotate(144deg)",
    "hue-rotate(270deg)";

var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
    interval = window.setInterval(changeFilter, 1000);

}).mouseleave(function () {
    window.clearInterval(interval);
});

function changeFilter() 
    var filter = filters.shift();
    filters.push(filter);
    $div.css({

    "-webkit-filter": filter

    });

}

fiddle

Answer 1

你有很多语法错误。我在这里解决了这些问题：http://jsfiddle.net/gvee/57E4K/4/

var counter = 0;
var filters = ["hue-rotate(99deg)"
              , "hue-rotate(22deg)"
              , "hue-rotate(144deg)"
              , "hue-rotate(270deg)"];

var div = $('#coloredDiv');
var interval;

div.hover(function () {
    interval = window.setInterval(changeFilter, 1000);
}, function () {
    window.clearInterval(interval);
});

function changeFilter() {
    var filter = filters.shift();
    filters.push(filter);
    div.css({
        '-webkit-filter': filter
    });
}

如何使用jquery在图像上循环使用css过滤器（在webkit中）

1 个答案: