如何通过在一段文字上使用JavaScript实现动画效果？
我想尝试创建一个效果，当我触发一个事件时，一条动画线会穿过一段文字。效果应该在Java脚本中完成。如何通过在一段文字上使用JavaScript实现动画效果？
有人可以建议一些方法来做到这一点？我有文字已经在页面上，我想的文字从左至右透，如果线路正在草拟
使用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，我会编辑我的答案。
这很酷，但最好不要使用'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
}
}
我会在带有删除线样式的文本之前创建一个空跨度。然后，我会编写一个函数，将第一个字符从文本的前面弹出，并将其附加到您的范围。然后，使用setTimeout（）重复调用该函数，直到该文本为空。
你问一个建议 - 代码将需要更长的时间:)
这就是我要做的，但是使用'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; }
+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>
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);
- 通过每个字符（除了
\n）转到使用正则表达式和递归应用功能与回调来包装用span每个单独的匹配字符。 - 选择所有这些
span元素，然后使用setInterval()遍历它们，通过span的style对象添加style="text-decoration: line-through。 - 停止当我们遍历每个
span。
使用innerHTML时的缺点时序列化HTML，你失去所有的事件，等等。在上面的小提琴，在strong元素仍然是可点击（你会点击span，这将泡到父）。
+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;
}
您使用什么标记？ Vanilla JavaScript，或者你正在使用库（jQuery，MooTools，Glow，Scriptaculous ..）？ – 2011-03-20 12:56:24
暂时不承诺任何框架。虽然会很高兴与道场合作。 – thiswayup 2011-03-20 16:34:08