用jQuery弯曲文本，无需硬编码 [英] Curving Text with Jquery no Hardcoding
问题描述
我正在使用以下代码更改在文本框中键入的字体文本，并且效果很好，我现在要做的是使用Jquery将文本显示为CURVE，如下所示.我尝试使用 http ://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/，但我看到那里的大多数文本都是经过编码的，我不想简而言之，如果有人在文本框中键入文本，则应将其显示为弯曲的，而不是一条直线\
I am using the following code to change font text of whatever typed in text box and it works great, what i want to do now is display the text as CURVE using Jquery something like below. I tried to use http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/ but i see that most of the text there is harcoded and i dont want that.So in short if someone typed text in the textbox it should be displayed as curved instead of one single line\
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - </title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#ta').keyup(function(){
$('#float').html("<p>"+$(this).val()+"</p>");
});
$("#fs").change(function() {
$('#float').css("font-family", $(this).val());
});
$("#size").change(function() {
$('#float').css("font-size", $(this).val() + "px");
});
});//]]>
</script>
</head>
<body>
<form id="myform">
<button>erase</button>
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form> <textarea id=ta class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
<div id="float">
<p>
Text into container
</p>
</div>
</div>
</body>
</html>
推荐答案
在代码中包含插件，并将其用于脚本
Include the plugin in your code and use this for your script
$(window).load(function(){
function update(){
var text = '<p>' + $('#ta').val() + '</p>',
size = $('#size').val(),
font = $('#fs').val();
$('#float')
.css({
fontFamily: font,
fontSize: size + 'px'
})
.html(text)
.find('p')
.arctext();
}
$('#ta').keyup( update );
$("#fs, #size").change( update );
});
演示: http://jsfiddle.net/gaby/AnyNQ/1/
这篇关于用jQuery弯曲文本，无需硬编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
