2009-06-06 5 views
0

자바 스크립트에 대해 아는 것이 없지만 이미지를 클릭하고 페이지 크기를 늘리고 싶습니다.자바 스크립트로 페이지 높이 늘리기

예. 이미지가있는 500px x 500px 상자. 이미지를 클릭하면 상자가 500px x 1000px로 증가하고 페이지를 변경하지 않고 새 영역 내에 새로운 내용이 표시됩니다.

어떻게하면됩니까? 이 웹 사이트에

처럼 당신이 페이지

<div id="extraDiv" style="display:none"> some extra stuff </div> 

및 자바 스크립트를 사용하여 하단에 아래의 요소를 가질 수 아래

+0

어떻게 500x500에서 500x100으로 "증가"합니까? –

+0

100px가 500px보다 작습니다 ... 1000px입니까? – James

+0

음, 예 Lol 했어 나는이 웹 사이트에서 마음에 들어. http://kyanmedia.com/ 하단의 귀신 웜을 클릭하십시오. –

답변

2

에서 지구 웜을 클릭 http://kyanmedia.com/

document.getElementById("extraDiv").style.display = "block"; 

페이지를 길게 만듭니다. 애니메이션을 원하면 jQuery, scriptaculous 또는 다른 javascript 라이브러리를 사용할 수 있습니다.

0

이 작업을 수행하려면 jQuery을 사용할 수 있습니다.이 작업을 수행하는 데 멋진 스크롤이 필요합니다. 같은

<div>Main Content</div> 
<div id="hiddenLab" style="display:none">Content to show</div> 

당신은 다음을 위하기 위해 jQuery를 slideToggle 명령을 사용하고 아래로 뭔가 : 당신이 사업부의 메인 컨텐츠있어 가지고, 그 내용이 당신처럼, 숨겨진 DIV에 표시 할

<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#hidden").click(function(){ 
       $("#about").slideToggle("slow"); 
      }); 
     });  
    </script> 
    <style type="text/css"> 
     #maincontent { width:100%; height:100px;background:green} 
     #about { width:100%; height:1000px;display:none;background:red;} 
    </style> 
</head> 
<body> 
    <div id="maincontent"> 
     <a id="hidden" href="#">Click to see hidden</a> 
    </div> 
    <div id="about">Content to show</div> 
</body> 
+0

jQuery 명령은 어디에 사용합니까? CSS 파일 또는 HTML에서? –

+0

jQuery 명령은 자바 스크립트 내부로 들어갑니다. jQuery는 자바 스크립트 라이브러리 일뿐입니다. 위의 코드를 실행하려면 id = "earthWorm"인 요소 (이미지, 링크 등)를 추가하십시오. 위의 코드는 해당 요소를 클릭 할 때 실행됩니다. 관심있는 사람들은 jQuery에 대한 간단한 개요를 보려면이 비디오 (http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/)를 확인하십시오. 실제로 배우기 쉽고 그것으로 진짜 좋은 것들을 할 수 있습니다. – Fermin

+0

나는 이것을 작동시킬 수 없다. 스크립트는 다음과 같습니다. html로는 #maincontent { 폭 : 자동; 신장 : 1000px; } #about { 너비 : 자동; 신장 : 1000px; } 도움? –