shuffle-effect.zip
jQuery 관련 포스팅은 기본적인 포스팅이기에 관련된 예제를 통하여 직접 응용하기 바라는 의미에서 이제 관련 예제를 올리려고 합니다.
이번 jQuery 포스팅 예제는 이미지가 한장씩 자동으로 뒤로 넘어가는 효과를 만드는 예제 입니다.
<!-- Welcome to the scripts database of HSCRIPTS -->
<!-- This tool is developed and a copyright -->
<!-- product of HSCRIPTS. -->
<!-- For more information visit http://www.hscripts.com -->
<html>
<head>
<title></title>
<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/cycle-plugin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#shuffle").cycle({fx:'shuffle',
delay: -88000
});
});
</script>
<style type="text/css">
#shuffle{
width: 300px;
height: 300px;
/*a width should be defined for transition to work*/
border: 0px solid orange;
padding: 5px;
}
</style>
</head>
<body>
<div id="shuffle" style="float-left;">
<img src="images/image1.jpeg" width="300" height="300">
<img src="images/image2.jpeg" width="300" height="300">
<img src="images/image3.jpeg" width="300" height="300">
<img src="images/image4.jpeg" width="300" height="300">
<img src="images/image5.jpeg" width="300" height="300">
<img src="images/image6.jpeg" width="300" height="300">
</div>
</body>
</html>
<!-- Welcome to the scripts database of HSCRIPTS -->
<!-- This tool is developed and a copyright -->
<!-- product of HSCRIPTS. -->
<!-- For more information visit http://www.hscripts.com -->
// 이용방법은 간단합니다. 위와 같이 jquery.js 와 cycle_plugin.js 파일을 불러들인후 jQuery 선언뒤에 <div id="shuffle"...></div> 처럼 이미지를 적으면 끝입니다. 그렇게 되면 아래와 같이 이미지가 한장씩 뒤로 자동으로 넘어가는 효과가 나타납니다.
그림 상으론 제대로 표현이 안될듯 합니다. 첨부화일 올려놓았으니 참조 바랍니다. 나름대로 응용을 해보면 실무에도 적용이될 내용을 찾을수 있지 않을까 기대해봅니다.
http://www.hscripts.com/scripts/jquery/ 에서 더 많은 내용을 볼 수 있습니다.
'jQuery > jQuery 예제' 카테고리의 다른 글
| jQuery Slide Menu(슬라이드 메뉴) (0) | 2013.06.25 |
|---|
