如何使用 JavaScript 和 CSS 从循环文本中创建 link？

Question

我正在使用 jQuery 和 CircleType.js 让文本以圆形模式显示。我的问题是如何使圆圈中的文字成为 hyperlink？ circletype.js 自动删除任何使用的 a 元素，并且由于此方法在每个字母周围放置了一个 span 标记，我不确定如何将 circletype.js 与 [=34= 一起使用].

是否有另一种方法可以在不使用 circletype.js 的情况下使用 link 将文本环绕成圆形？我仍然是 JavaScript 的新手，所以如果有一种方法可以用 JS 创建 links，那么任何有助于正确编写脚本的方法都会很棒。我的代码如下（减去 css）：

<body>
<div id="img-container">
    <p id="link-circle">
        LINK &diams; LINK &diams; LINK &diams; LINK &diams; LINK &diams;&nbsp;
    </p>
    <a href="#">
        <div id="switch">
            <form action="">
                <input type="radio" id="left-radio" name="Column Select" value="left"/>
                <input type="radio" id="right-radio" name="Column Select" value="right"/>
            </form>
            <span id="dbl-chevron">&raquo;</span>
        </div>
    </a>
</div>
<script type="text/javascript">
    $( document ).ready(function() {
        $('#link-circle').circleType();
    });
</script>
</body>

这是一个例子：

也许甚至可以通过在文本上叠加 div 层来创建 link 的方法来实现。但我不确定该采用哪种方式。在此先感谢您的帮助！

Answer 1

您是否尝试过使用 <a> 标签包装每个链接，例如：

<p id="link-circle">
    <a href="#">LINK</a> &diams; 
    <a href="#">LINK</a> &diams; 
    <a href="#">LINK</a> &diams; 
    <a href="#">LINK</a> &diams; 
    <a href="#">LINK</a> &diams;
</p>

Answer 2

jQuery有两种可能的方法。

一个是在创建圈子后在 div 上做一个 wrapInner()。

另一个是做一个 click() 事件，它将运行一个 javascript 重定向。

我个人会支持 wrapInner() 方法。

环绕

<script type="text/javascript">
    $( document ).ready(function() {
        var link = $('#link-circle').find('a').attr('href');
        $('#link-circle').circleType().wrapInner('<a href="'+link+'"></a>');
    });
</script>

重定向

<script type="text/javascript">
    $( document ).ready(function() {
        $('#link-circle').circleType();
        $('#link-circle').click(function() {
            window.location.href = "your link here";
        });
    });
</script>

Answer 3

查看 the plugin's code and playing with it, I discovered that it was the required LetteringJS 正在删除任何标签的插件后。

他们在第 33 行调用它：$(elem).lettering();

然后我想出了一个主意。

我们能做什么？

我们可以在元素被 LetteringJS 分割之前保存 HTML。
然后，让它发挥作用。
之后，我们可以将标签放回原先包含在其中的每个字母周围。

部分解决方案

为什么 "partial"？

我的解决方案只适用于：

非自闭标签：没有<img/>、<input/>等，但我认为这不太可能发生。
非嵌套标签： 没有 <b><a></a></b>，但你可以用类伪造它 - 请参阅下面的演示。

它是如何工作的？

我们需要更改 CircleType 的源代码，以便它执行我们想要的操作。我已经评论了我的代码，但如果您不明白什么，或者发现错误或需要改进，请不要犹豫告诉我！

// trim spaces at the beginning and at the end
elem.innerHTML = elem.innerHTML.replace(/^\s+|\s+$/g, '');

// grab the HTML string
var temp = elem.innerHTML;

// replace any space that is not part of a tag with a non-breakable space (&nbsp;)
elem.innerHTML = elem.innerHTML.replace(/<[^<>]+>|\s/g, function(s) {
                     return s[0] == '<' ? s : '&nbsp;';
                 });

// wrap each character in a span
$(elem).lettering();


var inTag = false, // are we between tags? (<i>here</i>)
    isTag = false, // are we inside a tag? (<here></here>)
    tagNum = -1,   // how many opening tags have we met so far? (minus 1)
    pos = 0,       // character position (excluding tags)
    dom = document.createElement('div'); // temporary dom

dom.innerHTML = temp; // clone our element in the temporary dom

var tags = dom.children; // children of the element
// for each of them, empty their content
for(var i=0, l=tags.length; i<l; i++){
    tags[i].innerHTML = '';
}

// for each character in our HTML string
for(var i=0, l= temp.length; i<l; i++){
    var c = temp[i];
    // if it's a '<'
    if(c == '<'){
        // and if it's an opening tag
        if(!inTag){
            // increment the number of tags met
            tagNum++;
            // we're in a tag!
            inTag = true;
        }
        else{
            // otherwise we're in a closing tag
            inTag = false;
        }
        // we're on a tag (<here>)
        isTag = true;
    }
    // if it's a '>'
    else if(c == '>'){
        // we're not <here> anymore
        isTag = false;
    }
    // if we're not <here>
    else if(!isTag){
        // if we're <b>here</b>
        if(inTag){
            // replace the span's content with our tag
            elem.children[pos].innerHTML = tags[tagNum].outerHTML;
            // put the letter back in
            elem.children[pos].children[0].innerHTML = c;
        }
        // move forward in the spans
        pos++;
    }
}

如何使用 JavaScript 和 CSS 从循环文本中创建 link？

How do you create a link out of circular text with JavaScript and CSS?

html

javascript

css

jquery

hyperlink

环绕

重定向

我们能做什么？

部分解决方案

为什么 "partial"？

它是如何工作的？

资源

JS Fiddle Demo

Updated plugin source