Выберите конкретный символ в строке и сместите его (визуально) с помощью Jquery

Question

Я пытаюсь использовать Jquery / Javascript для имитации сломанного шрифта пишущей машинки (так как я не смог его найти). Но я хочу сделать случайным, какое письмо сломано. Мне удалось разделить строку идентификатора, который я хотел, и использовать немного кода, который я нашел, чтобы получить случайное число между 0 и общей длиной строки. У меня сейчас проблемы с тем, что я делаю что-то с этим конкретным персонажем. Я хочу сдвинуть его вниз или вверх на несколько пикселей. Я пытался дать ему класс, чтобы я мог добавить некоторые поля или отступы, но это не работает. Так что я застрял там, где я сейчас.

вот эта страница, я пытаюсь сделать это со словом "О":
http://www.franciscog.com/bs/about.php

вот сценарий:

<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

РЕДАКТИРОВАТЬ: Обновлен, чтобы гарантировать, что совпавший символ не является пробелом, и добавил небольшой стиль, предложенный @abelito.

Как насчет этого: 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);​

Обновление: Если вы хотите применить его к нескольким: http://jsfiddle.net/cgXa3/5/

Answer 2

Мне нравится ответ Патрика, но в качестве альтернативы я бы изменил одну и ту же букву по всему тексту.И, возможно, немного повернуть его (хотя это не сработает в IE).Я сделал демонстрационную версию , которую я раздвоил от Патрика.

CSS

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

Код

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

---

Обновление: этокод, необходимый для применения к нескольким тегам h1 ( обновленная демоверсия ):

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