复活节彩蛋 - 字母间距

时间:2014-04-08 14:38:51

标签: javascript jquery css

我创造了一个小复活节彩蛋。将鼠标悬停在h1标题上时,会创建字母,动画字母会显示在页面底部。我希望在字母之间创建更多的间距作为秋天,这样它们就不会全部融合在一起。

为此,我做了:

                myspan.css({
                    "color" : "Navy",
                    "position": "absolute",
                    "margin" : "20px",
                    "padding" : "20px",
                    "left": $(this).position().left,
                    "top": parent.height()
                });

enter image description here

但它不起作用。有什么想法吗?这是代码:

            $(".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()
                });

这不起作用

2 个答案:

答案 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