Question

我对javascript / jQuery相当新，但我正在全力以赴地了解我在做什么。我受diesel's site的启发。在this site上，数据属性用于主页上的文本块。 data-color。我想在my site上实现这个功能。能够在每个条目中更改每个块的颜色，当用户向下滚动页面时，它会以不同的方式触发。

我来这里寻求帮助，因为我没有看到任何有关我想要实现的功能的教程。有谁知道如何做到这一点？我相信这对那些想要执行相同或类似功能的人有用。

getColorMod: function(color, val) {
    var hexToRgb = function(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false;
    }
    var array = hexToRgb(color),
    r = parseFloat(array[0] + val),
    g = parseFloat(array[1] + val),
    b = parseFloat(array[2] + val),
    rgb = array ? {
        r: r >= 250 ? 200 : r,
        g: g >= 250 ? 200 : g,
         b: b >= 250 ? 200 : b
    } : false;

    return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
},

Answer 1

HTML5数据属性仅用于在html元素中存储其他信息。我在程序化打印各种数据集时使用它，以包含用户帐号等信息。您可能想要使用javascript或jquery

访问的数据位

您可以看到great documentation/tutorial here on the HTML5 data attribute by webtutsplus

数据属性很有趣，因为您可以将其定义为您喜欢的任何内容：

     data-[NAME]="[VALUE]"
     data-color="blue"
     data-price="$19.96"

更新版本的jQuery还具有内置的易用功能，专门用于处理getting and setting HTML5 data-attributes - documentation here

想象一下假设的HTML：

     <span id="fluxCapacitor" data-gigawats="1.21"></span>

在我们的磁通电容jquery元素上调用.data处理程序将返回“1.21”

     $('#fluxCapacitor').data('gigawats'); // "1.21"

您可以使用两个参数功能将磁通电容设置为超过9000 gigawats。

     $('#fluxCapacitor').data('gigawats', "over 9000");

导致：

     <span id="fluxCapacitor" data-gigawats="over 9000"></span>

编辑：根据历史准确度调整了我的功率级别。

Answer 2

<div class="bg">
    <div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div>
</div>

使用您选择的库

这似乎是Diesel执行颜色过渡的方式。

var $bodyBg = $('<div />'),
$bg = $('<div />').addClass('bg').append($bodyBg),
$arrow = $('<span />').addClass('arrow');

this.$navs.append($bg).append($arrow);

this.$navs
.on('hide', function() {
    // hide navigation bar
    $(this).addClass('hide');
})
.on('show', function() {
    // show navigation bar
    $(this).removeClass('hide');
})
.on('changeColor', $.proxy(function(e, color) {

    var $elm = $(e.currentTarget),
        $bg = $elm.find('.bg div');

    if (Modernizr.csstransforms && Modernizr.csstransitions) {
        // css3 transition
        $bg.css({
            transition: 'background 500ms ease',
            backgroundColor: this.getColorMod(color, 12)
        });
    } else {
        // no css3 transition support
        $bg.css({
            backgroundColor: this.getColorMod(color, 12)
        });
    }

}, this))
.trigger('hide')
.appendTo(this.$el);

了解HTML5数据属性

2 个答案: