2013년 9월 12일 목요일

[제이쿼리 1.10.2 강좌, 제이쿼리1.10]jquery innerFade 플러그인을 이용한 애니메이션 예제

[제이쿼리 1.10.2 강좌, 제이쿼리1.10]jquery innerFade 플러그인을 이용한 애니메이션 예제


간단하게 화면 전환 효과 만들 수 있음
http://medienfreunde.com/lab/innerfade  하단의 zip 파일 다운로드
jquery.innerfade.js를 src 추가

<html><head><meta charset="utf-8"/>
<style>
* {margin:0px; padding:0px;}
ul { list-style:none; }
img { width:200px; height:150px;"}
</style>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<!--  플러그인은 jquery.js 다음에 -->
<script src="/ajaxjquery/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//inner fade plugin 적용, ul태그를 대상으로,innerfade 메소드의 첫매개변수에는 객체입력
$("#innerfade").innerfade({
animationtype: 'fade', <!-- 내용의변경효과 slide, fade -->
speed: 750,
timeout:2000, <!-- 변경효과 적용되는 속도 -->
type:'random', <!-- 내용변경방식, auto, 숫자 -->
containerheight:'200px'
});     });
</script>
<body> 
<ul id="innerfade">
<li><img src="http://www.onjprogramming.co.kr/onj/images/new_logo.gif"/></li>
<li><img src="http://www.onjprogramming.co.kr/onj/img/oraclejavacommunity.jpg"/></li>
<li><img src="http://www.onjprogramming.co.kr/onj/img/bnr_01.gif"/></li>
</ul>
</body>
</html>
 

 



오라클자바커뮤니티 실전 개발자 강좌 - 개인80%환급
Spring3.X, MyBatis, Hibernate실무과정 총 5일 35시간   09-24
[기업특강]JAVA,JSP,AJAX,jQUERY 총 5일 40시간   09-26
스프링3.X게시판&오라클힌트,SQL튜닝,사례연구 총 4일 32시간   09-27
JAVA&WEB프레임워크실무과정 총 33일 99시간   09-13
자바초보에서안드로이드까지 총 18일 54시간   09-25
Spring3.X, MyBatis, Hibernate실무과정 총 12일 36시간   09-26
스프링3.X게시판&오라클힌트,SQL튜닝,사례연구 총 11일 33시간   09-26
자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지 총 24일 72시간   09-26
JAVA,JSP 초보에서 실무까지 총 18일 56시간   10-02
자바초보에서안드로이드까지 총 8일 56시간   09-14
Spring3.X, MyBatis, Hibernate실무과정 총 5일 35시간   09-14
자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지 총 10일 70시간   09-14
MiPlatform, XPlatform 실무강좌 총 5일 35시간   09-28
스프링3.X게시판&오라클힌트,SQL튜닝,사례연구 총 4일 32시간   09-28
JAVA&WEB프레임워크실무과정 총 14일 98시간   09-28 
작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)