0

我正在使用以下代码来更改在文本框中键入的任何字体文本，效果很好，我现在要做的是使用 Jquery 将文本显示为 CURVE，如下所示。我尝试使用http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/但我看到那里的大部分文本都是硬编码的，我没有想要那个。所以简而言之，如果有人在文本框中键入文本，它应该显示为弯曲而不是单行\

在此处输入图像描述

<!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>
4

2 回答 2

1

在您的代码中包含插件并将其用于您的脚本

$(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/

于 2012-05-26T14:51:54.520 回答
0

查看CircleType.js。你可以看到它是如何在这个网站上用来创建弯曲的文本输入的。

全面披露：CircleType.js 是我的项目，但我认为它可能对您的情况有所帮助。

于 2014-07-13T21:31:03.507 回答