Javascript Skrollr:操纵html5数据属性
我已经编写了一个Javascript/jQuery函数,用于将HTML5数据属性动态写入一些HTML标记并使其工作。我无法使用jQuery.data(),因为它只存储(不在标记中写入)属性。这是我的密码:Javascript Skrollr:操纵html5数据属性,javascript,jquery,html,skrollr,Javascript,Jquery,Html,Skrollr,我已经编写了一个Javascript/jQuery函数,用于将HTML5数据属性动态写入一些HTML标记并使其工作。我无法使用jQuery.data(),因为它只存储(不在标记中写入)属性。这是我的密码: parallaxData(); window.addEventListener('resize', parallaxData); function parallaxData(){ if ($(window).width() > 768 && imgContai
parallaxData();
window.addEventListener('resize', parallaxData);
function parallaxData(){
if ($(window).width() > 768 && imgContainer.length) {
var imgContainerJS = document.getElementById('big-image'),
captionJS = document.getElementById('caption'),
headerJS = document.getElementById('header');
imgContainerJS.dataset.top = 'transform:translateY(0px);'
imgContainerJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/4 + 'px);'
captionJS.dataset.anchorTarget = "#big-image-wrap"
captionJS.dataset.top = 'transform:translateY(0px);'
captionJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/8 + 'px);'
headerJS.dataset.anchorTarget = "#big-image-wrap"
headerJS.dataset.top = 'transform:translateY(0px);'
headerJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/4 + 'px);'
var animDone = false;
skrollr.init({
forceHeight: false,
smoothScrolling: false,
render: function() {
if ( header.hasClass('skrollable-after') ) {
if ( ! animDone ) {
animDone = true;
header.addClass('fixed-header').css({
'display' : 'none'
}).fadeIn(300);
}
} else {
animDone = false;
header.removeClass('fixed-header');
}
}
}).refresh();
imgCaption.css({ position: 'fixed' });
singleImg.css({ position: 'fixed' });
} else if ($(window).width() > 768) {
$('#content').css({ marginTop: headerHeight + 'px' });
imgCaption.css({ position: 'fixed' });
singleImg.css({ position: 'fixed' });
} else {
skrollr.init().destroy();
$('#content').css({ marginTop: 0 + 'px' });
var parallaxEls = $('header, #big-image, #caption'),
attrs = parallaxEls[0].attributes,
name,
index;
for (index = attrs.length - 1; index >= 0; --index) {
name = attrs[index].nodeName;
if (name.substring(0, 5) === "data-") {
parallaxEls.removeAttr(name);
}
}
parallaxEls.css({
'-webkit-transform' : '',
'-moz-transform' : '',
'transform' : '',
'backgroundPosition' : ''
}).removeClass('skrollable-after');
imgCaption.css({ position: 'absolute' });
singleImg.css({ position: 'absolute' });
}
}
我想知道,仅仅使用jQuery是否有机会获得相同的结果,这也是因为我需要按类而不是按ID选择元素。我用jQuery进行了尝试。可以将属性添加到img或div或其他内容 我用代码中的一个div尝试了它,元素不可见,但是添加了属性,我可以在firebug中看到它
其他的div还在滚动,所以我把它搞砸了
希望它能帮助你(即使几个月前你问过)。如果您已经找到答案,请分享您的解决方案是的,最后我使用了。attr谢谢!
$(document).ready(function(){
$(".yourclass").attr({
"data-450": "exampleCSS:examplechange;",
"data-500": "exampleCSS:examplechange;"});
});