目标:用户在用户输入字段中键入名称，选择动画按钮，名称垂直打印，每个字母包含每个字母的投影。可能需要 Javascript 库 Raphael。
问题:到目前为止，我所遇到的是名称被并排垂直打印两次。显然第二列应该是作为阴影的字母，但我不知道如何将它们的样式更改为看起来像阴影。
我的经理给了我一个提示:“我必须在文本下方创建第二个文本行......我在上面使用了 .blur() 方法。如果我必须给你另一个提示，我会暗示你到门口。”
我在这里遇到了一些真正的麻烦。如果有人有任何建议、解决方案，我们将不胜感激。
<html>
<head>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
function animate() {
var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");
document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;
document.getElementById("msg").innerHTML = txt;
r.clear();
// Make our pink rectangle
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"});
ellipse.glow({width:10});
}
</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}
#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
</script>
</body>
</html>
长寿和繁荣。
最佳答案
你真的需要拉斐尔吗？我所做的只是将您的文字打印到一个元素上，并使用 css 的文本阴影获得阴影。为了获得垂直文本，我添加了一个 </br>在每个字母之后。
看看 fiddle :http://jsfiddle.net/joplomacedo/wVGbF/
以下是代码，以防您看不到 fiddle :
HTML
Text: <input type="text" id="words" value="" />
<input id="animateBtn" type="button" value="Animate" />
<div class="print"></div>
CSS
.print {
font: 44px/0.8em "Lobster", cursive;
color: gold;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
JS
var join = Array.prototype.join;
$('#animateBtn').on('click', function() {
var txt = $('#words').val(),
spaced_txt = join.call(txt, "</br>");
$('.print').html(spaced_txt);
});
关于javascript - 用户输入的字母阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11470932/