Bir dizedeki belirli bir karakteri seçin ve Jquery

Question

ile ofsetleyin (görsel olarak) Bozuk bir daktilo yazı tipini taklit etmek için Jquery/Javascript kullanmaya çalışıyorum (bulamadığım için). Ama hangi mektubun kırıldığını rastgele yapmak istiyorum. İstediğim kimliğin dizesini böldüm ve 0 ile toplam dizginin uzunluğu arasında rastgele bir sayı elde ettiğim bir kod kodu kullandım. Şu anda sorunum olan şey, o karakterle bir şeyler yapmak. Onu aşağı veya birkaç piksel yukarı itmek istiyorum. Bir sınıf vermeye çalışıyordum, bu yüzden bir miktar marj veya dolgu ekleyebilirdim, ama işe yaramıyor. Yani şimdi olduğum yerde kaldım. Burada

, ben "HAKKINDA" sözcüğü bunu yapmak için sayfa çalışıyorum ediyor:

<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

DÜZENLEME: eşleşti sağlamak için Güncelleme burada http://www.franciscog.com/bs/about.php

senaryo karakter bir boşluk karakteri değil ve @abelito tarafından önerilen küçük bir stil ekledi.

nasıl bu konuda: 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);​ 

Güncelleme: birkaç uygulamak isterseniz: http://jsfiddle.net/cgXa3/5/

Answer 2

Patrick'in cevabı gibi ama alternatif olarak ben boyunca aynı mektubu değiştirecek Metin. Ve belki de küçük bir parça döndürün (bu, IE'de çalışmayacak olsa da). Patrick'in çatalından çıkardığım a demo'u yaptım.

CSS

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

Kod

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

---

Güncelleme:

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('')); 
});