Выберите определенный символ в строке и сместите его (визуально) с JQuery
Я пытаюсь использовать Jquery/Javascript для имитации поврежденного шрифта печатающего устройства (так как я не мог найти один). Но я хочу сделать это случайным, какая буква повреждается. Я смог разделить строку идентификатора, который я хотел, и используйте немного кода, который я нашел для получения случайного числа между 0 и общая длина строки. С чем у меня есть проблема, теперь делает что-то с тем определенным символом. Я хочу снизить его или несколько пикселей. Я пытался дать ему класс, таким образом, я мог добавить некоторое поле или дополнение, но это не работает. Таким образом, я застреваю, где я теперь.
вот страница, я пытаюсь сделать это к слову "О":
http://www.franciscog.com/bs/about.php
вот сценарий:
2 ответа
РЕДАКТИРОВАТЬ: Обновлено, чтобы гарантировать, что совпадающий символ не является пробелом, и добавлен небольшой стиль, предложенный @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 /
Мне нравится ответ Патрика, но в качестве альтернативы я бы изменил одну и ту же букву во всем тексте. И, возможно, немного повернул бы ее (хотя это не будет работать в 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(''));
});