Je veux essayer de créer un effet lorsque je déclenche un événement une ligne animée frappe à travers un texte. L'effet doit être effectué dans le script Java.
Quelqu'un peut-il suggérer des moyens de faire cela? J'ai déjà du texte sur une page et j'aimerais que le texte frappe de gauche à droite comme si une ligne est dessinée
7 Réponses :
Vous pouvez ajouter une balise quelque chose sur ces lignes (non testé): p> code> au début de la chaîne et déplacez de manière itérative la fermeture s> code> baliser un personnage plus loin vers la fin de la chaîne , probablement mieux en utilisant settimeout () code>. 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
}
}
Utilisation de jQuery Il est possible avec peu de tweak:
3 commentaires
C'est cool, mais il peut être préférable de ne pas sérialiser le code HTML avec
@ALEX Je suppose qu'il n'y a pas de tels événements, vient de tirer un exemple rapide .. Qu'est-ce qui pourrait être une meilleure alternative iyo?
J'ai ajouté
html () qui déposera tous les autres événements attachés.
Je créerais une plage vide avant la pièce de texte avec un style de frappe à travers elle. Ensuite, j'écrirais une fonction qui apparaît le premier caractère de l'avant du texte et l'a ajouté à votre étendue. Ensuite, utilisez Settimeout () pour appeler cette fonction à plusieurs reprises jusqu'à ce que le texte soit vide.
Vous avez demandé une suggestion - le code prendrait plus de temps :)
C'est ce que je ferais, mais avec seinterval , pas settimeout .
Vous pouvez utiliser jQuery pour animer une image d'arrière-plan qui ressemble à une frappe. Peut-être quelque chose comme ceci:
.someclass { background-position: -1000px 0px; }
Bonne idée. Je ne pense pas que cela fonctionnerait à travers les pauses de la ligne, cependant.
Voici une implémentation de base qui fonctionne dans les versions actuelles d'IE, Firefox et Chrome:
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.
Go through each character (except \n) using regex and recursively apply function with callback to wrap each individual matched character with a span.
Select all these span elements and then use setInterval() to traverse them, adding style="text-decoration: line-through via the style object of the span.
Stop when we have iterated through each span.
The disadvantage of using innerHTML is when you serialize the HTML, you lose all events, etc. In the fiddle above, the strong element is still clickable (you will click the span, which will bubble up to the parent).
+1 Bien sûr, mais je doute que l'OP veut TOUT TEXT dans le document pour vous faire grimer? :)
@Shadow L'OP peut simplement changer document.body à un élément quelconque qu'ils souhaitent et merci beaucoup.
Bien sûr, i sais que .. :) Vous utilisez également document.getelementsbytagname ('span') de sorte que cela doit également être modifié pour supporter un élément spécifique.
@ALEX n'est-ce pas un peu surkill? S'il vous plaît dites-moi qu'en pensez-vous: 1. Créez une plage avant le noeud de texte avec Strikethrough. 2. Boucle à travers le texte et déplacez chacun des caractères en intervalle. 3. Si l'élément d'origine était une étendue, donnez-lui une hâte et replacez tout le texte) (pour maintenir les événements) et supprimer la nouvelle plage. Othrise c'est tout!
Je viens de venir ici de Google, a fini par écrire ma propre petite fonction simple. C'est comme ça que je l'ai fait:
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;
}
Avec quelle marque travaillez-vous? Vanilla JavaScript, ou travaillez-vous avec une bibliothèque (JQuery, Motoools, Glow, Scriptaculeux ..)?
Non engagé dans aucun cadre pour le moment. Bien que serait bien de le faire travailler avec Dojo.