我如何通过动画对一段文字使用JavaScript效果罢工？ [英] How do I animate a strike through effect using JavaScript on a piece of text?

问题描述

我想尝试通过创建，当我通过触发一段文字的事件动画线路雷击的作用在哪里。效果应该在Java脚本来完成。

I want to try create an effect where by when I trigger an event an animated line strikes through a piece of text. The effect should be done in Java Script.

有人建议一些方法来做到这一点？我有文字已经在网页上，我想的文字从左至右罢工通过，如果线路正在制订

Can someone suggest some ways to do this? I have text already on a page and I would like the text to strike through from left to right as if a line is being drawn

推荐答案

使用jQuery它可能有小调整： HTTP ：//jsfiddle.net/yahavbr/EbNh7/

Using jQuery it's possible with little tweak: 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 文本罢工，使得该行出现动画。

This will strike through myDiv text, making the line appear with animation.

由于它不使用任何重jQuery的东西，它可以被转换成普通的JavaScript pretty容易，所以如果你preFER不使用jQuery我将修改我的答案。

As it's not using any heavy jQuery stuff it can be converted to plain JavaScript pretty easily so if you prefer not to use jQuery I'll edit my answer.

这篇关于我如何通过动画对一段文字使用JavaScript效果罢工？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！