2009-10-19 2 views
1

나는 페이지의 제목은 jQuery로이 웹 사이트의 사용자에게 제공되는 방식과 비슷한 무언가를 달성하기 위해 노력하고, 예로부터이 제목 생성을 달성하기 위해 기본 색인에서 미리보기 이미지를 클릭하면 해당 미리보기 이미지의 제목이 사용자에게 올바르게 나타날 때까지 다른 값을 생성합니다.방법이 웹 사이트

어도비 플래시를 사용하고 있어도 jQuery를 사용하면 어떻게 될지 궁금하십니까?

감사합니다.

답변

4

이것은 jQuery가없는 접근 방식입니다. 이것이 개선 될 수 있다고 확신하지만, 이것이 도움이되기를 바라며 이것을하는 방법에 대한 아이디어를 제공합니다. moxn 당신을 위해 모든 노력을 다하고 있지만

<html> 
<head> 
<script type="text/javascript"> 

function createRandomString(length, id, callback, value) { 
    if (typeof value == "undefined"){ 
     value = ""; 
    } 
    if (value.length == length){   
     callback(value); 
     return; 
    } 
    var c = ((Math.round(Math.random() * 100)) % 127); 
    if (c == '\'' || c == '\"'){ 
     c = 33; 
    } 
    value += String.fromCharCode(Math.max(33, c)); 
    document.getElementById(id).innerHTML = value; 
    setTimeout(function(){createRandomString(length, id, callback, value)}, 20); 
} 

    function changeHeader(id, realString, randomString){ 
     if (typeof randomString == "undefined") { 
     createRandomString(realString.length, id, function(value){changeHeader(id, realString, value);}); 
     return; 
     } 
     var d = realString.length - randomString.length; 
     var modifiedString = realString.substring(0, d) + randomString; 
     document.getElementById(id).innerHTML = modifiedString; 
     if (randomString.length == 0){ 
     return; 
     } 
     randomString = randomString.substring(1); 
     setTimeout(function(){changeHeader(id,realString,randomString);}, 50); 
    } 


</script> 
</head> 
<body> 

<h1 id="test"></h1> 

<button onclick="changeHeader('test', 'this is the header')">Test</button> 
</body> 
</html> 
+0

감사합니다. 힙합 Moxn - 잘 작동합니다. 접근 방식을 이해하기 위해 코드를 살펴볼 것입니다. – tonyf

+0

문제 없습니다. 환영합니다 – moxn

0

, 난 당신이 정말 후 것을의 JQuery와 - 얘기들이었다 버전이 무엇인지 생각 ... 그래서 여기

JQuery와 플러그인입니다, 감사가 moxn 원래 코드, 내가 한 모든 ...

(function($){ 
    $.fn.generateHeader=function(settings){ 
    var settings=$.extend({ 
     newText:"This is a new header" 
    },settings); 
    return this.each(function(){ 
     var _this=$(this)[0]; 

     changeHeader(_this, settings.newText); 

     function createRandomString(length, node, callback, value) { 
     if (typeof value == "undefined"){ 
      value = ""; 
     } 
     if (value.length == length){     
      callback(value); 
      return; 
     } 
     var c = ((Math.round(Math.random() * 100)) % 127); 
     if (c == '\'' || c == '\"'){ 
      c = 33; 
     } 
     value += String.fromCharCode(Math.max(33, c)); 
     node.innerHTML = value; 
     setTimeout(function(){createRandomString(length, node, callback, value)}, 20); 
     } 

    function changeHeader(node, realString, randomString){ 
     if (typeof randomString == "undefined") { 
     createRandomString(realString.length, node, function(value){changeHeader(node, realString, value);}); 
     return; 
     } 
     var d = realString.length - randomString.length; 
     var modifiedString = realString.substring(0, d) + randomString; 
     node.innerHTML = modifiedString; 
     if (randomString.length == 0){ 
     return; 
     } 
     randomString = randomString.substring(1); 
     setTimeout(function(){changeHeader(node,realString,randomString);}, 50); 
    } 




    }); 
    }; 
})(jQuery); 

가 먼저 어딘가에 HTML에서 위의 코드를 포함하여 사용할 것 jQuery 플러그인에 공 같은 것을 호출 한 후

및 변환했다여기에 heading이 적용 할 요소의 ID이고 'this is the new header text'을 표시하고 싶은 텍스트로 변경하십시오.

+0

jQuerying Moxn의 버전에 감사드립니다. – tonyf