如何在一段文本上使用 JavaScript 为穿透效果设置动画? [英] How do I animate a strike through effect using JavaScript on a piece of text?

问题描述

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

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，因此如果您不想使用 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屋！