用户输入的字母阴影 [英] Letter Shadows from User Input
问题描述
目标：用户在用户输入字段中键入名称，选择Animate按钮，垂直打印名称，每个字母包含每个字母的阴影。 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）。
var area = txt;
var splittxt = txt.split（）;
document.getElementById（letters）。innerHTML =;
document.getElementById（letters2）。innerHTML =;
var i;
for（i = 0; i
document.getElementById（letters2）。innerHTML = document.getElementById（letters2）。innerHTML + splittxt [i] +< br>;
}
//显示文本框中有多少个符号，文本框中有多少个符号
document.getElementById（num）。innerHTML = txt.length;
document.getElementById（msg）。innerHTML = txt;
r.clear（）;
//制作我们的粉红色矩形
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>
文本：< input type =textid =wordsvalue =/>
< input type =buttonvalue =Animateonclick =animate（）/>
< div id ='msg'>< / div>
< div id ='num'>< / div>
< div id ='letters'>< / div>
< div id =letters2>< / div>
< div id =draw-here-raphaelstyle =height：200px; width：400px; margin-top：0px;>
< / div>
< div id =elpsstyle =margin-left：100px;/>
< script type =text / javascript> //所有的javascript都在这里
var r = new Raphael（draw-here-raphael）;
< / script>
< / body>
< / html>
Live Long and Prosper。
你真的需要raphael吗？我做的只是打印出你的话到一个元素，并得到阴影与CSS的文本阴影。要获得垂直文本，我在每个字母后添加< / br> 。
fiddle： http://jsfiddle.net/joplomacedo/wVGbF/
$ b
HTML
<$> p $ p>
文本：< input type =textid =wordsvalue =/>
< input id =animateBtntype =buttonvalue =Animate/>
< div class =print>< / div>
CSS
.print {
font：44px / 0.8emLobster，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）;
}）;
Goal: User types name into user input field, selects Animate button, and name is printed vertically with each letter containing a drop shadow of each letter. The Javascript library Raphael may be desirable.
Problem: So far what I have is the name being printed vertically twice side by side. Obviously the second column should be the letters as drop shadows, but I don't know how to change the style of them to look like shadows.
My manager gave me one hint: "I had to create a 2nd text line placed underneath the text...and I used the .blur() method on it. If I have to give you another hint I'll be hinting you to the door."
I'm in some real trouble here. If anyone has suggestions, solutions, anything it would be very much appreciated.
<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>
Live Long and Prosper.
Do you really need raphael? What I did was simply print out your words onto an element and get the shadow with css's text-shadow. To get the vertical text I added a </br> after each letter.
Take a look at the fiddle: http://jsfiddle.net/joplomacedo/wVGbF/
Here's the code in case you can't see the 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);
});
这篇关于用户输入的字母阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
