0

这是问题示例的链接：

http://www.frysa.us/Arctext/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Arctext.js - Curving text with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Arctext.js - Curving text with CSS3 and jQuery" />
        <meta name="keywords" content="arc, letters, words, rotate, warp, circle, curve, along, path, jquery, css3, transform" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat|Sail|Concert+One' rel='stylesheet' type='text/css' />
    </head>
    <body>

    </body>
</html>
        <div class="container">
            <section class="sub" id="sub4">
                <div class="example">

/* 这是将 example4 的 id 应用于 ->

                    <h3 id="example4">See me change</h3>
                </div>
                <div class="code">
                    <h4>Example 4 - Set/animate</h4>
                    <p>Set or animate</p>
                    <code>$example4.arctext({radius: 300})</code>
                    <p class="buttons">
                        <a id="button_set" href="#"><span>Set me</span><span>radius: 140,<br /> dir: -1</span></a>
                        <a id="button_anim1" href="#"><span>Animate me</span><span>radius: 300,<br /> dir: -1,<br /> animation: 300ms ease-out</span></a>
                        <a id="button_anim2" href="#"><span>Animate me</span><span>radius: 200,<br /> dir: 1,<br /> animation: 300ms</span></a>
                        <a id="button_reset" href="#"><span>Reset me</span><span>radius: 300,<br /> dir: 1</span></a>
                    </p>
                </div>
                <div class="clr"></div>
            </section>
            <div class="clr"></div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.arctext.js"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>

/*我试图调整的元素是 example4 ->

        <script type="text/javascript">
            var $headline = $('#headline').hide();

            var $word1        = $('#arc-wrapper').find('h3').hide();
            var $word2        = $('#arc-wrapper').find('h4').hide();

            var $example1    = $('#example1').hide();
            var $example2    = $('#example2').hide();
            var $example3    = $('#example3').hide();
            var $example4    = $('#example4').hide();

            google.load('webfont','1');

            google.setOnLoadCallback(function() {
                WebFont.load({
                    google        : {
                        families    : ['Montserrat','Concert One']
                    },
                    fontactive    : function(fontFamily, fontDescription) {
                        init();
                    },
                    fontinactive    : function(fontFamily, fontDescription) {
                        init();
                    }
                });
            });

            function init() {
                $headline.show().arctext({radius: 400});

                $word1.show().arctext();
                $word2.show().arctext({radius: 148, dir: -1});

                $example1.show().arctext({radius: 300});
                $example2.show().arctext({radius: 400, dir: -1});
                $example3.show().arctext({radius: 500, rotate: false});
                $example4.show().arctext({radius: 300});

                $('#button_set').on('click', function() {
                    $example4.arctext('set', {
                        radius        : 140,
                        dir            : -1
                    });
                    return false;
                });
                $('#button_anim1').on('click', function() {

                    $example4.arctext('set', {
                        radius        : 300, 
                        dir            : -1,
                        animation    : {
                            speed    : 300,
                            easing  : 'ease-out'
                        }
                    });
                    return false;
                });
                $('#button_anim2').on('click', function() {
                    $example4.arctext('set', {
                        radius        : 200, 
                        dir            : 1, 
                        animation    : {
                            speed    : 300
                        }
                    });
                    return false;
                });




                $('#button_reset').on('click', function() {
                    $example4.arctext('set', {
                        radius        : 300, 
                        dir            : 1
                    });
                    return false;
                });

            };
        </script>

/* 这是我设置的附加输入字段 ->

<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('example4').innerHTML = userInput;

}
</script/>
4

2 回答 2

1

您可以使用destroy 作为参数。

$j("#text").arctext('destroy');  //Destroy, clear all the stuff
$j("#text").html(value); // Put a new value in the element with ID:Text
$j("#text").arctext({radius:70}); // Create a new curved text with arctext
于 2013-06-13T18:00:39.657 回答
0

插件将字符串拆分为每个字符。

例如：“测试”

<div id="example4">
   <span>t</span>
   <span>e</span>
   <span>s</span>
   <span>t</span>
<div/>

编码：

userInput ="hello";
document.getElementById('example4').innerHTML = userInput;

将html更改为

<div id="example4">
   hello
<div/>

如果您想再次显示 arctext，请重新初始化

再次调用函数init()！

function changeText2(){
   var userInput = document.getElementById('userInput').value;
   //document.getElementById('example4').innerHTML = userInput;
   //$("#example4").html("").html(userInput).show().arctext({ radius: 300 });
   var newh3 = $("<h3>");
   newh3.html(userInput)
   $("#example4").after(newh3);
   $example4.remove();
   newh3.show().arctext({ radius: 300 });
   $example4 = newh3.attr("id", "example4");
 }
于 2012-08-10T02:13:43.800 回答