Wählen Sie ein bestimmtes Zeichen in einer Zeichenfolge und versetzen Sie es (visuell) mit Jquery

Question

Ich versuche, Jquery/Javascript zu verwenden, um eine defekte Schreibmaschinenschrift nachzuahmen (da ich keine finden konnte). Aber ich möchte es zufällig machen, welcher Buchstabe gebrochen wird. Ich war in der Lage, die Zeichenfolge der ID, die ich wollte, zu teilen und ein bisschen Code zu verwenden, den ich gefunden habe, um eine zufällige Zahl zwischen 0 und der Gesamtlänge der Schnur zu erhalten. Woran ich jetzt ein Problem habe, ist etwas mit diesem spezifischen Charakter zu tun. Ich möchte es ein paar Pixel nach unten oder nach oben drücken. Ich habe versucht, eine Klasse zu geben, damit ich etwas Marge oder Padding hinzufügen kann, aber es funktioniert nicht. So bleibe ich stecken, wo ich jetzt bin.

hier ist die Seite, ich versuche es zu dem Wort zu tun "ÜBER":
http://www.franciscog.com/bs/about.php

hier ist das Skript:

<script type="text/javascript"> 

     function randomXToY(minVal,maxVal,floatVal) 
      { 
       var randVal = minVal+(Math.random()*(maxVal-minVal)); 
       return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
      } 


     var str = $('#typehead').text(); 
       var strcnt = str.length; 
     var exploded = str.split(''); 
     var rdmltr =randomXToY(0,strcnt); 
     var theLetter = exploded[rdmltr]; 
     theLetter.addClass("newClass"); 
     var toffset = $('.newClass').offset(); 
     alert(toffset.left + "," + toffset.top); 

    </script> 

Answer 1

EDIT: dass die abgestimmt, um sicherzustellen, aktualisiert Zeichen ist kein Leerzeichen und fügte einen kleinen Stil hinzu, der von @abelito vorgeschlagen wird.

Wie wäre es damit: http://jsfiddle.net/cgXa3/4/

function randomXToY(minVal,maxVal,floatVal){ 
    var randVal = minVal+(Math.random()*(maxVal-minVal)); 
    return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
} 


var exploded = $('#typehead').text().split(''); 
var rdmltr = randomXToY(0,exploded.length); 

    // Make sure we don't get a space character 
while(exploded[rdmltr] == ' ') { 
    rdmltr = randomXToY(0,exploded.length); 
} 
    // Wrap the letter with a span that has the newClass 
    // and update it in the array 
exploded[rdmltr] = '<span class="newClass">' + exploded[rdmltr] + '</span>'; 

    // Update the content 
$('#typehead').html(exploded.join('')); 
var toffset = $('.newClass').offset(); 
alert(toffset.left + "," + toffset.top);​ 

Update: Wenn Sie es auf mehr anwenden: http://jsfiddle.net/cgXa3/5/

Answer 2

I Patrick Antwort mögen, aber als Alternative würde ich die gleichen Buchstaben in ganz ändern der Text. Und vielleicht drehen Sie es auch ein kleines bisschen (obwohl dies nicht in IE funktioniert). Ich machte a demo, die ich von Patrick abgab.

CSS

.newClass { 
left: 0px; 
top: -1px; 
color: red; 
position:relative; 
-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg); 
} 

-Code

function randomLetter(cased){ 
// case = true for uppercase, false for lowercase 
var base = (cased) ? 65 : 97; 
// convert HTML escape code into a letter 
var rand = $('<span>&#' + parseInt(base+(Math.random()*25),10) + ';</span>'); 
return rand.text(); 
}; 

$(document).ready(function(){ 
var ltr = randomLetter(false); 
var reg = new RegExp(ltr, 'g'); 
$('#typehead').html(function(i,html){ 
    return html.replace(reg, '<span class="newClass">' + ltr + '</span>'); 
}); 
}); 

---

Update: Dies ist der Code benötigt, um mehrere h1-Tags anwenden (updated demo):

function randomXToY(minVal,maxVal,floatVal){ 
var randVal = minVal+(Math.random()*(maxVal-minVal)); 
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
} 

$('.typehead').each(function() {     
//access the text and characters within the tag with the id typehead 
var exploded = $(this).text().split(''); 
var rdmltr = randomXToY(0,exploded.length); 

// Make sure we don't get a space character or undefined 
while(exploded[rdmltr] == ' ' || exploded[rdmltr] == undefined) { 
    rdmltr = randomXToY(0,exploded.length); 
} 

// Wrap the letter with a span that has the new class brokenType 
// and update it in the array 
exploded[rdmltr] = '<span class="brokenType">' + exploded[rdmltr] + '</span>'; 

// Update the content 
$(this).html(exploded.join('')); 
});