Question

如何旋转循环中每个项目的色调。

如果我有：

items = {
   item1: 'item1',
   item2: 'item2',
   item3: 'item3'
}

对于此列表中的每个项目，我想通过30%

更改它的色调

这样的事情：

for name, item in items
  .{name}
     color: hue(green, 30%)

Answer 1

如果你的目标只是使用CSS，没有javascript解决方案，我建议使用LessHat或类似的框架（有关LessHat的色调旋转的详细信息可以在这里找到：https://github.com/madebysource/lesshat/blob/master/mixins/hue-rotate/hue-rotate.md）。您可以静态生成旋转项目列表，但它只适用于给定（和常量）项目列表。

使用手写笔，您可以尝试：

items = {
   'item1': {
    'color': red
    'index': '1'
   }
   'item2': {
    'color': green
    'index': '2'
   }
   'item3': {  
    'color': blue
    'index': '3'
   }
}

for key, value in items
  .{key}
    color: hue(value[color], 30% * value[index])

如果你想动态改变给定元素的色调，你必须使用Javascript - 我建议使用JQuery Color库（在这里找到：https://github.com/jquery/jquery-color/）。

重要提示：以下示例使用角度变化（色调描述为0到360之间的角度，如果用百分比描述，红色不会受到影响，因为它的值为0度）。

示例可以在这里找到： http://jsfiddle.net/5r5w4x7g/4/

var changeHue = function(angle) {
    // Check if angle is between 0 and 360   
    if (angle) {
        if(angle>= 0 && angle<= 360) {
            classes.forEach(function(cls) {  
                // Get element with class
                var element = $('.'+cls);
                if(element.length) {                    
                    // Get current color and build JQuery Color object
                    var currentColorStr = element.css('background-color');
                    var color = $.Color(currentColorStr);
                    var hue = color.hue();                    
                    // Change hue by percentage and round it
                    hue = +hue + (+angle);
                    color = color.hue(hue);                    
                    // Set new color
                    element.css('background-color', color);
                }
            });
        }
    }
}

使用手写笔

1 个答案: