오.. 역시 쉽게 잘만든듯! 이렇게 프로그램 할수 있으면 정말..아무나 만들수 있을텐데..
페이지 전환 효과에는 총 7가지가 있다. slideup, dissolve, fade, flip, pop, swap, cube 까지..
한번 만들어 보는겸해서 내년에 개봉할 영화 리스트로 간단하게 만들어 보았다.
- 아시다 싶히 jqtouch 라이블러리는 개인이 설정한 경로에 따라 달라집니다.
- 아래의 소스중에서 import 부분과 script src 부분의 경로를 재설정해 주셔야 합니다.
결과 화면(화면전환이 빨라서 스샷을 못찍겠어..ㅜㅡㅜ 겨우 찍은건 pop, cube화면뿐..)
<%@ page contentType="text/html;charset=euc-kr" %>
<!doctype html>
<html>
<head>
<meta charset="EUC-KR" />
<title>2011년 개봉 예정작</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
<script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
<script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
<script type="text/javascript" charset="euc-kr">
var jQT = new $.jQTouch({
icon: './img/logo.png',
addGlossToIcon: false,
startupScreen: './img/startimg.png',
statusBar: 'black',
preloadImages: [
'jqtouch/themes/jqt/img/back_button.png',
'jqtouch/themes/jqt/img/back_button_clicked.png',
'jqtouch/themes/jqt/img/button_clicked.png',
'jqtouch/themes/jqt/img/grayButton.png',
'jqtouch/themes/jqt/img/whiteButton.png',
'jqtouch/themes/jqt/img/loading.gif'
]
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="Menu">
<div class="toolbar">
<h1>개봉 영화 리스트</h1>
</div>
<ul class="rounded">
<li class="arrow"><a class="slideup" href="#seasonofthewitch">마녀의 계절</a></li>
<li class="arrow"><a class="dissolve" href="#themechanic">더 메카닉</a></li>
<li class="arrow"><a class="fade" href="#iamnumberfour">아이 엠 넘버 포</a></li>
<li class="arrow"><a class="flip" href="#suckerpunch">석커 펀치</a></li>
<li class="arrow"><a class="pop" href="#scream4">스크림4</a></li>
<li class="arrow"><a class="swap" href="#transformers">트랜스포머3</a></li>
<li class="arrow"><a class="cube" href="#mission">미션임파서블4</a></li>
</ul>
</div>
<div id="seasonofthewitch">
<div class="toolbar">
<h1>마녀의 계절</h1>
<a class="back" href="#">Back</a>
</div>
<dl>
<dt>
<img src="http://image.cine21.com/resize/cine21/poster/2010/0111/M0010024_Season_of_the_Witch[X160,230].jpg" />
</dt>
<dd><strong>Season of the Witch</strong></dd>
<dd>영화 정보</dd>
<dd>감독 : Dominic Sena</dd>
<dd>주연 : Nicolas Cage</dd>
<dd> Ron Perlman</dd>
<dd>장르 : 판타지, 스릴러</dd>
<dd>북미 개봉일 : 1월 7일</dd>
</dl>
</div>
<div id="themechanic">
<div class="toolbar">
<h1>더 메카닉</h1>
<a class="back" href="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/1858C6264CEBCE072F" />
</dt>
<dd><strong>The Mechanic</strong></dd>
<dd>영화 정보</dd>
<dd>액션, 드라마 | 미국 </dd>
<dd>감독 : 사이먼 웨스트 </dd>
<dd> 제이슨 스태덤, 벤 포스터</dd>
<dd>도날드 서덜랜드 (해리 역)</dd>
<dd>북미니 안덴 (사라 역)</dd>
<dd> 줄거리 : 줄거리1972년 마이클 위너 감독이 연출하고 찰슨 브론슨과 잔 마이클 빈센트가 주연한 영화 <냉혈인>의 리메이크작. 베테랑 살인청부업자가 자신의 뒤를 이을 제자를 키우게 되는데 그 이면에는 숨겨진 음모가 있다.
</dd>
</dl>
</div>
<div id="iamnumberfour">
<div class="toolbar">
<h1>아이 엠 넘버 포</h1>
<a class="back" href="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/135A1F014CA8995A8F" />
</dt>
<dd><strong>I Am Number Four</strong></dd>
<dd>영화 정보</dd>
<dd>액션, SF | 미국 </dd>
<dd>감독 : D.J. 카루소 </dd>
<dd> 알렉스 페티퍼 (넘버 4 역)</dd>
<dd> 티모시 올리펀트 (헨리 역)</dd>
<dd> 다이아나 애그론 (사라 역)</dd>
<dd> 줄거리 : 외계인 십대 청소년들이 자신의 고향별을 파괴한 다른 외계인들을 피해 도망친다는 내용.</dd>
</dl>
</div>
<div id="suckerpunch">
<div class="toolbar">
<h1>서커 펀치</h1>
<a class="back" hr치ef="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/2023AD1F4C4DC09B5B" />
</dt>
<dd><strong>Sucker Punch</strong></dd>
<dd>영화 정보</dd>
<dd>액션, 판타지 | 미국 </dd>
<dd>감독 : 잭 스나이더 </dd>
<dd> 바네사 허진스 (블론디 역)</dd>
<dd> 제이미 정 (앰버 역)</dd>
<dd> 에밀리 브라우닝 (베이비 돌 역)</dd>
<dd> 줄거리 : 계부에 의해 정신 병원에 갖힌 소녀의 상상담</dd>
</dl>
</div>
<div id="scream4">
<div class="toolbar">
<h1>스크림 4</h1>
<a class="back" hr치ef="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/137C660B4BE6E2C72B" />
</dt>
<dd><strong>Scream 4</strong></dd>
<dd>영화 정보</dd>
<dd>공포, 스릴러 | 미국 </dd>
<dd>감독 : 웨스 크레이븐 </dd>
<dd> 엠마 로버츠 (질 역)</dd>
<dd> 니브 캠벨 (시드니 역)</dd>
<dd> 커트니 콕스 (게일 역)</dd>
<dd> 줄거리 : 1996년부터 시리즈 3편까지 제작된 <스크림>의 4번째 시리즈. </dd>
</dl>
</div>
<div id="transformers">
<div class="toolbar">
<h1>트랜스 포머 3</h1>
<a class="back" hr치ef="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/16158A254CCFA2A71E" />
</dt>
<dd><strong>transformers 3</strong></dd>
<dd>영화 정보</dd>
<dd>액션, 어드벤처 | 미국 </dd>
<dd>감독 : 마이클 베이 </dd>
<dd> 샤이아 라보프 (샘 윗위키 역)</dd>
<dd> 로지 헌팅턴-휘틀리, 패트릭 뎀시 (미카엘라의 보스 역)</dd>
<dd> 존 말코비치 (샘의 보스 역)</dd>
<dd> 줄거리 : 트랜스포머 시리즈의 3번째 이야기로 그간 주인공으로 활약해 온 샤이아 라보프가 함께 할 예정.</dd>
</dl>
</div>
<div id="mission">
<div class="toolbar">
<h1>미션 임파서블4</h1>
<a class="back" hr치ef="#">Back</a>
</div>
<dl>
<dt>
<img src="https://t1.daumcdn.net/cfile/blog/15110210A905C6E98A" />
</dt>
<dd><strong>Mission: Impossible IV</strong></dd>
<dd>영화 정보</dd>
<dd>액션 | 미국 </dd>
<dd>감독 : J.J. 에이브람스 </dd>
<dd> 톰 크루즈 (에단 헌트 역)</dd>
<dd> 폴라 패튼</dd>
<dd> 제레미 레너</dd>
<dd> 줄거리 : 톰 크루즈가 전편들에 이어 주연을 맡는 <미션 임파서블>의 4번째 시리즈. </dd>
</dl>
</div>
</body>
</html>
- 화면 전환의 효과는 빨간색으로 표시된 class에 원하는 효과 이름만 넣어주면 됩니다.
- 화면에 맞는 div id 만 설정해 주면 원하는 페이지로 이동이 가능합니다
- 참쉽죠!^-^/
'web > JQTouch' 카테고리의 다른 글
| jqtouch home 버튼 만들기 (0) | 2011.05.31 |
|---|---|
| jqtouch form post (0) | 2011.05.30 |
| jQTouch viewport 에 대하여.. (0) | 2010.12.06 |
| jQTouch 혹시 한글이 안된다면! (2) | 2010.12.05 |
| jQTouch media Queries (0) | 2010.12.02 |
