문자열에서 특정 문자를 선택하고 시각적으로 Jquery로 오프셋합니다.

Question

Jquery/Javascript를 사용하여 부러진 타자기 글꼴을 모방했습니다 (찾을 수 없으므로). 그러나 어떤 편지가 깨지는 지 무작위로 만들고 싶습니다. 나는 원하는 이드의 문자열을 나눌 수 있었고 0과 문자열의 총 길이 사이의 임의의 숫자를 얻기 위해 찾은 약간의 코드를 사용할 수있었습니다. 내가 지금 문제를 겪고있는 것은 그 특정한 성격을 가진 무엇인가를하는 것입니다. 나는 그것을 몇 픽셀 아래로 밀어 내고 싶다. 여백이나 패딩을 추가 할 수 있도록 클래스를 제공하려고했지만 작동하지 않습니다. 그래서 나는 지금있는 곳에서 붙어 있습니다. 여기

, 나는 "정보"라는 단어에 그것을 할 페이지 노력하고 있어요 :

<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

편집 :가 일치하도록 업데이트 여기 http://www.franciscog.com/bs/about.php

스크립트입니다 문자는 공백 문자가 아니며 @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에서는 작동하지 않지만). 나는 a demo을 만들었으며 Patrick 's에서 벗어났습니다.

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

---

업데이트 :

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