h1
标题上时,会创建字母,动画字母会显示在页面底部。我希望在字母之间创建更多的间距作为秋天,这样它们就不会全部融合在一起。
为此,我做了:
myspan.css({
"color" : "Navy",
"position": "absolute",
"margin" : "20px",
"padding" : "20px",
"left": $(this).position().left,
"top": parent.height()
});
但它不起作用。有什么想法吗?这是代码:
$(".title").lettering(); //splits H1 letters into individual spans
$("h1 span").mouseenter(function () {
var colors = ["White"],
rand = Math.floor((Math.random()*colors.length-1)+1),
string = "National Champs!",
letter = string.charAt(index),
myspan = $(document.createElement('span')),
parent = $(this).parent(),
val = $(this);
if (index >= string.length) {
index = 0;
}
else {
index++;
}
myspan.append(letter);
parent.append(myspan);
myspan.css({
"color" : "Navy",
"position": "absolute",
"margin" : "20px",
"padding" : "20px",
"left": $(this).position().left,
"top": parent.height()
});
myspan.animate({"top": $(window).outerHeight()}, 9000, "linear", function() {
$(this).remove();
});
val.css({"color" : colors[rand]});
setTimeout(function() {
val.css({"color" : "black"});
val.css({"font-size" : 35});
//index =0;
},2000);
});
编辑:
我做了
myspan.css({
"color" : "Navy",
"position": "absolute",
"letter-spacing" : "2px",
"left": $(this).position().left,
"top": parent.height()
});
这不起作用
答案 0 :(得分:2)
使用css属性letter-spacing
可能会有所帮助
letter-spacing:2px
答案 1 :(得分:1)
您需要提供letter-spacing
的单位,仅2
值并不意味着什么。我假设您正在考虑像素,因此在这种情况下将是:
myspan.css({
"color" : "Navy",
"position": "absolute",
"letter-spacing" : "2px",
"left": $(this).position().left,
"top": parent.height()
});
请检查一下:https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing