jQuery(제이쿼리) 강좌와 예제모음

예제

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
URL : https://ktsmemo.cafe24.com/s/jquery/29
등록일 : ,
예제 입니다.
현재 준비중인 게시글 입니다. ㅠㅠ

CSS

.wrap {
	border:5px solid silver;
	overflow:hidden;
	padding:5px;
	width:500px;
	margin:0 auto;
}
.wrap img { position:relative; left:-120px; }

.wrap_btn { text-align:center; margin-top:10px; }

HTML

<div class="wrap">
	<img src="http://ktsmemo.cafe24.com/img/man.gif">
</div>
<div class="wrap_btn">
	<button type="button" onclick="gogogo()">눌러보세요</button>
</div>

자바스크립트

function gogogo(){
	$('.wrap img').stop().css({ left:'-120px' }).animate({ left:'+=700' }, 2000);
}

실행 가능한 소스

좀 더 재미있게 바꿔 봅시다.

CSS

.wrap {
	border:5px solid gray;
	border-radius:5px;
	overflow:hidden;
	padding:5px;
	width:500px;
	margin:0 auto;
	height:100px;
	position:relative;
}
.wrap img { position:absolute; left:-120px; }
.wrap_btn { text-align:center; margin-top:10px; }

HTML

<div class="wrap"></div>
<div class="wrap_btn">
	<button type="button" onclick="gogogo()">빠르게 연타해 보세요</button>
</div>

자바스크립트

function gogogo(){
	$('.wrap').append('<img src="http://ktsmemo.cafe24.com/img/man.gif">')
	$('.wrap img:last').animate({ left:'+=700' }, 2000, function(){
		$(this).remove();
	});
}

실행 가능한 소스