Question

我想尝试创建一个效果，当我触发事件时，动画线会穿过一段文字。效果应该在Java Script中完成。

有人可以建议一些方法吗？我已经在页面上有文字，我希望文本从左到右穿过，好像正在绘制一条线

Answer 1

使用jQuery可以进行一些调整：http://jsfiddle.net/yahavbr/EbNh7/

JS正在使用中：

var _text = "";
$(document).ready(function() {
    _text = $("#myDiv").text();
    StrikeThrough(0);
});

function StrikeThrough(index) {
    if (index >= _text.length)
        return false;
    var sToStrike = _text.substr(0, index + 1);
    var sAfter = (index < (_text.length - 1)) ? _text.substr(index + 1, _text.length - index) : "";
    $("#myDiv").html("<strike>" + sToStrike + "</strike>" + sAfter);
    window.setTimeout(function() {
        StrikeThrough(index + 1);
    }, 100);
}

这将触发myDiv文字，使该行显示动画。

由于它没有使用任何沉重的jQuery东西，它可以很容易地转换为纯JavaScript，所以如果你不想使用jQuery我会编辑我的答案。

Answer 2

var findText = function(element, pattern, callback) {

    if ( ! element.childNodes) {
      return;   
    }
    for (var childi = element.childNodes.length; childi-- > 0;) {
        var child = element.childNodes[childi];
        if (child.nodeType == 1) {
            findText(child, pattern, callback);
        } else if (child.nodeType == 3) {
            var matches = [];
            var match;
            while (match = pattern.exec(child.data))
            matches.push(match);
            for (var i = matches.length; i-- > 0;)
            callback.call(window, child, matches[i]);
        }
    }
}


findText(document.body, /./g, function(node, match) {
    var element = document.createElement('span');
    node.splitText(match.index + 1);
    element.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(element, node.nextSibling);
});

var spans = document.getElementsByTagName('span'),
    spansLength = spans.length,
    currentSpan = 0,
    interval = setInterval(function() {
        if (currentSpan == spansLength) {
            clearInterval(interval);
        }
        spans[currentSpan++].style.textDecoration = 'line-through';

    }, 100);

jsFiddle

使用正则表达式遍历每个字符（\n除外）并使用回调递归应用函数，以使用span包装每个匹配的字符。
选择所有这些span元素，然后使用setInterval()遍历它们，并通过style="text-decoration: line-through的{{1}}对象添加style。
当我们遍历每个span时停止。

使用span的缺点是，当您序列化HTML时，会丢失所有事件等。在上面的小提示中，innerHTML元素仍然可以点击（您将点击{{1} }，它将冒泡到父母。）

Answer 3

您可以使用jQuery为看起来像删除线的背景图像设置动画。也许是这样的：

$(".someclass").animate({backgroundPosition: '0px 0px'})

这可能看起来比尝试执行涉及<s>标记的内容更顺畅一些。您的HTML标记将如下所示：

<span class="someclass">Lorem ipsum</span>

你需要确保.someclass使用默认的CSS，通过使用background-position隐藏背景图片，即：

.someclass { background-position: -1000px 0px; }

Answer 4

我会在带有删除线样式的文本之前创建一个空的跨度。然后，我会写一个函数，弹出文本前面的第一个字符并将其附加到您的跨度。然后，使用setTimeout（）重复调用该函数，直到该段文本为空。

您要求提出建议 - 代码需要更长时间：）

Answer 5

您可以在字符串的开头添加<s>标记，并将结束</s>标记迭代地移动到字符串末尾的一个字符，最好使用setTimeout()。< / p>

这些内容（未经测试）：

STRIKE_POS = 1;
ORIG_STR = '';

function startStrike(str) {
    STRIKE_POS = 1;
    ORIG_STR = str;
    strike();
}

function strike() {
    var str = '<s>' + ORIG_STR.substr(0, STRIKE_POS) + '</s>'
              + ORIG_STR.substr(STRIKE_POS);

    // DO SOMETHING WITH THE STRING, LIKE DISPLAY SOMEWHERE

    STRIKE_POS++;
    if (STRIKE_POS < ORIG_STR.length) {
        window.setTimeout("strike()", 200);    // adjust the timeout
    }
}

Answer 6

这是一个适用于当前版本的IE，Firefox和Chrome的基本实现：

<html>
    <head>
        <script type="text/javascript">
            window.gradualStrike = function(spanId, timeMillis) {
                var stepDuration;
                var strikeElem = document.getElementById(spanId);
                var strikeText = strikeElem.innerHTML.replace("<S>", "<s>").replace("</S>", "</s>");  //IE uppercases the tag
                var currentStrikePos = strikeText.indexOf("</s>");
                if (currentStrikePos < 0) {
                    currentStrikePos = 0;
                    stepDuration = timeMillis / strikeText.length;
                }
                else {
                    if (currentStrikePos + 3 == strikeText.length) {
                        //the '</s>' is at the end, we are done
                        return;
                    }
                    currentStrikePos -= 3; //account for the '<s>' tag
                    stepDuration = timeMillis / (strikeText.length - 7);  //account for '<s>' and '</s>'
                    strikeText = strikeText.replace("<s>", "").replace("</s>", ""); //strikeText.replace(/\<s\>/, "").replace(/\<\/s\>/, "");

                }
                currentStrikePos++;
                strikeText = "<s>" + strikeText.substring(0, currentStrikePos) + "</s>" + strikeText.substring(currentStrikePos);
                strikeElem.innerHTML = strikeText;
                setTimeout("gradualStrike('" + spanId + "', " + timeMillis + ");", stepDuration);
            };
        </script>
    </head>
    <body>
        <span id="someText" onclick="gradualStrike('someText', 1000); this.onclick=function(){return;};">Click to strike...</span>
    </body>
</html>

Answer 7

刚从谷歌来到这里，最后编写了我自己的简单小功能。我就这样做了：

function drawLineOnClick() {

    //add or prepend div to the top of the div holding your text
    $("#IdOfElementHoldingTheText").prepend('<div id="lineThrough"></div>');
    var WidthStrikeThrEl = $("#IdOfElementHoldingTheText").width();

    $("#lineThrough").animate({width: WidthStrikeThrEl},1000, function() {

        //when line has been drawn, apply CSS line-through and remove line
        $("#IdOfElementHoldingTheText").attr('class', 'lineThrCssClass');
        $("#lineThrough").remove();
    });
}


#lineThrough {
  position:absolute;
  top:23px; //centering line over text to simulate actual line through
  width:0px;
  height:1px;
  background:#444; //color of line through
}

.lineThrCssClass {
    color:#444;
    text-decoration:line-through;
}

如何使用JavaScript在一段文本上通过效果为罢工制作动画？

7 个答案: