[英]Understanding HTML5 data attribute
我對javascript / jQuery相當陌生,但是我正在盡一切努力來了解自己在做什么。 我受到柴油廠的啟發。 在此站點上 ,數據屬性用於主頁上的文本塊。 data-color
。 我想在我的網站上實現此功能。 能夠在用戶向下滾動頁面時更改每個條目的每個塊的顏色,它的觸發方式也不同。
我來這里尋求幫助,因為我還沒有看到與我要實現的功能有關的任何教程。 有誰知道該怎么做? 我相信這對於希望執行相同或相似功能的用戶會有所幫助。
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 + ')';
},
HTML5數據屬性僅用於在html元素中存儲其他信息的目的。 我以編程方式打印各種數據集時使用了它,以包括諸如用戶帳號之類的信息。 您可能想使用javascript或jquery訪問的數據位
您可以通過webtutsplus在HTML5數據屬性上查看出色的文檔/教程。
數據屬性很有趣,因為您可以將任意屬性定義為:
data-[NAME]="[VALUE]"
data-color="blue"
data-price="$19.96"
jQuery的最新版本還具有內置的易於使用的功能,專門處理獲取和設置HTML5數據屬性-這里的文檔
想象一些假設的html:
<span id="fluxCapacitor" data-gigawats="1.21"></span>
在磁通量電容器jquery元素上調用.data處理程序將返回“ 1.21”
$('#fluxCapacitor').data('gigawats'); // "1.21"
您可以使用兩個參數功能將通量電容器設置為9000吉瓦以上。
$('#fluxCapacitor').data('gigawats', "over 9000");
導致:
<span id="fluxCapacitor" data-gigawats="over 9000"></span>
編輯:調整了我的力量水平,以確保歷史准確性。
<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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.