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

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，我会编辑我的答案。