如何通过在一段文字上使用JavaScript实现动画效果？

我想尝试创建一个效果，当我触发一个事件时，一条动画线会穿过一段文字。效果应该在Java脚本中完成。如何通过在一段文字上使用JavaScript实现动画效果？

有人可以建议一些方法来做到这一点？我有文字已经在页面上，我想的文字从左至右透，如果线路正在草拟

来源

2011-03-20 thiswayup

您使用什么标记？ Vanilla JavaScript，或者你正在使用库（jQuery，MooTools，Glow，Scriptaculous ..）？ – 2011-03-20 12:56:24

暂时不承诺任何框架。虽然会很高兴与道场合作。 – thiswayup 2011-03-20 16:34:08

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

来源

2011-03-20 13:00:28

这很酷，但最好不要使用'html（）'将序列化HTML，否则将放弃所有其他附加事件。 – alex 2011-03-20 13:04:51

@alex我假设没有这样的事件，只是拉快了例子..什么可能是更好的替代IYO？ – 2011-03-20 13:13:33

我加了[答案]（http://stackoverflow.com/questions/5368521/how-do-i-animate-a-strike-through-effect-using-javascript-on-a-piece-of-text/ 5368711＃5368711）我自己。 – alex 2011-03-20 13:15:00

你可以一个<s>标签添加到字符串的开头，并反复使封闭</s>标签一个字符更接近字符串的末尾，可能最好使用setTimeout()。

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 
    } 
}

来源

2011-03-20 12:59:52 Pascal

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

你问一个建议 - 代码将需要更长的时间:)

来源

2011-03-20 13:01:26 jbrookover

这就是我要做的，但是使用'setInterval'，而不是'setTimeout'。 – pilau 2013-03-21 10:41:56

你可以使用jQuery动画，看起来像一个删除线的背景图像。也许是这样的：

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

这可能看起来比试图做涉及<s>标签的东西更顺畅。你的HTML标记会是这样的：

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

而且你需要确保.someclass不得不通过使用背景位置隐藏背景图像默认的CSS，即：

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

来源

2011-03-20 13:03:21

+1原创想法！ :) – 2011-03-20 13:14:12

好主意。不过，我认为这不会发生换行。 – 2013-10-11 01:24:46

这里有一个基本实现，在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>

来源

2011-03-20 13:13:16 aroth

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()遍历它们，通过span的style对象添加style="text-decoration: line-through。
停止当我们遍历每个span。

使用innerHTML时的缺点时序列化HTML，你失去所有的事件，等等。在上面的小提琴，在strong元素仍然是可点击（你会点击span，这将泡到父）。

来源

2011-03-20 13:14:33 alex

+1当然，但是我怀疑OP是否希望文档中的所有**文本被删除？ :) – 2011-03-20 13:19:37

@Shadow OP可以简单地将'document.body'改为他们希望的任何元素，非常感谢。 – alex 2011-03-20 13:23:26

当然，**我知道.. .. :)另外，你正在使用'document.getElementsByTagName（'span'）'所以这也需要改变，以支持特定的元素。 – 2011-03-20 13:26:36

刚刚从谷歌来到这里，结束了写我自己的简单的小功能。这就是我的做法：

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; 
}

来源

2012-06-21 01:10:41 Jonathan

如何通过在一段文字上使用JavaScript实现动画效果？

回答

相关问题