jQuery UI 애니메이션 효과 코드 공유 실현

2861 단어 jQueryUI
페이지 문 서 를 불 러 온 후 첫 번 째 그림 에 클 라 스 속성 값 을 img 1 로 추가 하고 두 번 째 그림 에 클 라 스 속성 값 img 2 를 추가 하 며 세 번 째 그림 에 클 라 스 속성 img 3 을 추가 하고 네 번 째 그림 에 클 라 스 속성 값 img 4 를 추가 하면 각 그림 의 하단 부분 이 이전 그림 에 더 큰 그림 으로 덮어 집 니 다.
맨 위 에 노출 된 그림 을 마 우 스 를 눌 렀 을 때 이 그림 은 0.6 초 안에 원래 크기 에서 150%확대 되 고 투명 성 이 완전히 사라 질 때 까지 점점 줄 어 들 었 다.이와 동시에 다른 모든 그림 은 0.6 초 안에 동적 으로 확대 되 어 해당 하 는 그림 의 위 치 를 차지 했다.모든 동적 효과 가 끝나 면 사라 진 그림 이 맨 아래 에 다시 표 시 됩 니 다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery UI</title>
	<style type="text/css">
		div{
			position: relative;
		}
		img{
			position: absolute;
			border:solid 3px black;
		}
		.img1{
			width: 300px;
			height: 220px;
			top:120px;
			left: 200px;
			z-index: 4;
			opacity:1;
			cursor:pointer;
		}
		.img2{
			width: 200px;
			height: 145px;
			top:85px;
			left: 250px;
			z-index: 3;
			opacity: 0.7;
		}
		.img3{
			width: 120px;
			height: 90px;
			top:60px;
			left: 290px;
			z-index: 2;
			opacity: 0.5;
		}
		.img4{
			width: 60px;
			height: 55px;
			top:45px;
			left: 320px;
			z-index: 1;
			opacity: 0.4;
		}
	</style>
	<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="jquery.effects.core.min.js"></script>
	<script type="text/javascript" src="jquery.effects.scale.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('img').each(function(index){
				$(this).addClass('img'+(index+1));
			});
			$('img.img1').live('click',function(){
				$(this).hide('puff',{percent:150},600,function(){
					$(this).attr('class','img4').show();
				});
				$('img.img2').switchClass('img2','img1',600);
				$('img.img3').switchClass('img3','img2',600);
				$('img.img4').switchClass('img4','img3',600);
			});
		});
	</script>
</head>
<body>
	<div>
		<img src="1.jpg">
		<img src="2.jpg">
		<img src="3.jpg">
		<img src="4.jpg">
	</div>
</body>
</html>
초기 효과:

클릭 후 효과:

좋은 웹페이지 즐겨찾기