0

我试图通过在用户加载页面时更改图像上的 css-filter 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

    });

}

小提琴

4

1 回答 1

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
    });
}
于 2013-08-20T15:10:24.810 回答