1. 무한 복제하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.food {
text-align: center;
}
.food img {
position: relative;
cursor: pointer;
z-index: 99;
vertical-align: top;
width: 500px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="food" onselect="return false">
<img src="./img/about/aspiration__close.png" onclick="foodCopy(this)">
<img src="./img/about/aspiration__close.png" onclick="foodCopy(this)">
<img src="./img/about/aspiration__close.png" onclick="foodCopy(this)">
<h1>위 그림을 클릭해보세요!</h1>
<button type="button" class="" onclick="startClick()">광클릭 모드</button>
<button type="button" class="" onclick="stopClick()">멈추기</button>
</div>
<script>
function foodCopy(o){
var pos = $(o).offset(); // 클릭한 이미지의 위치알아내기
// 이동할 위치값을 랜덤으로 생성 -150 부터 150 사이
var rnd1 = Math.round( Math.random() * 300 - 150 );
var rnd2 = Math.round( Math.random() * 300 - 150 );
// 클릭한 이미지 기준으로 이동할 위치계산
var move_top = pos.top - rnd1;
var move_left = pos.left - rnd2;
// 보기편하게 여러줄 코딩
$(o)
.clone() // 클릭한 이미지 복제
.appendTo( '.food' ) // food 에 복제한것 추가
.css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경
.animate( { top : move_top, left : move_left }, 1000, function(){ // 위치이동 애니매이션
var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기
setTimeout( function(){ $(img).remove(); }, 3000); // 3초 후 제거
});
}
var timer;
// 자동 클릭 (광클)
function startClick(){
$('.food img:gt(-4)').click();
clearInterval(timer);
timer = setTimeout(startClick, 50);
}
// 자동 클릭 멈추기
function stopClick(){
clearInterval(timer);
}
</script>
</body>
</html>'웹 > (LIBRARY) JQUERY' 카테고리의 다른 글
| [코딩 공부_99] jQuery plugin 모음 (0) | 2021.06.24 |
|---|---|
| [코딩 공부_97] bx slider 사용하기 (0) | 2021.06.16 |
| [코딩 공부_96] slick 슬라이더 사용하기 (0) | 2021.06.16 |
| [코딩 공부_95] jQuery로 modal, tab 만들기 (0) | 2021.06.13 |
| [코딩 공부_94] jQuery 기본 함수 (0) | 2021.06.12 |
댓글