Question

我使用以下代码来更改文本框中任何类型文字的字体文本, 效果很好, 我现在想要做的是将文本显示为 CURVE 使用下面的 Jquery 。我试图使用 < a href=" http:// tympanus. net/ codrops/2012/01/ 24/ arctext-js- curving- text- with- css3- and- jquery/" rel=" nofoln norefererr" > http://tympanus. net/ codrops/2012/01/ 24/ arctext-js- curving- text- with- cs3- and- jquery/ 。但我看到, 大部分文本都是 harcoddddd 并且我不希望的。所以, 如果在文本框中输入的文本应该显示为曲线而不是单行的话。

""https://i.sstatic.net/TO2cZ.png" alt="此处输入图像描述"/"

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

Answer 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 );
});

Demo http://jsfiddle.net/gaby/AnyNQ/1/

Answer 2

查看 < a href=> "http://circletype.labwire.ca" rel="nofollow" >CircleType.js 。您可以看到它是如何在 < a href=>上使用的 http://petposter.co/poster.php? style=snakeoil" rel="nofollow" >这个网站来创建曲线文本输入。

完整披露:CircleType.js是我的项目,

友情链接