language:jquery:jquery_코드조각
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
language:jquery:jquery_코드조각 [2021/06/06 13:41] – 만듦 kieuns | language:jquery:jquery_코드조각 [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 4: | 줄 4: | ||
====== jQuery 코드 조각 ====== | ====== jQuery 코드 조각 ====== | ||
+ | |||
+ | ====== .animate() 연습 ====== | ||
+ | |||
+ | <code javascript> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | content=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | <!-- 문서 시작 ------------------------------- --> | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | .samp_box { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: fixed; | ||
+ | background: #0d77b6; | ||
+ | } | ||
+ | # | ||
+ | left: 50px; | ||
+ | top: 50px; | ||
+ | } | ||
+ | # | ||
+ | left: 50px; | ||
+ | top: 50px; | ||
+ | display: | ||
+ | } | ||
+ | |||
+ | .btn_t1 { | ||
+ | width: 100px; | ||
+ | height: 30px; | ||
+ | background-color: | ||
+ | position: relative; /* z-index 가 통하려면 position 이 필요하다 */ | ||
+ | z-index: 100; | ||
+ | border-style: | ||
+ | border-width: | ||
+ | display: | ||
+ | align-items: | ||
+ | justify-content: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <div id=' | ||
+ | <div id=' | ||
+ | |||
+ | <div id=' | ||
+ | <div id=' | ||
+ | |||
+ | </ | ||
+ | <!-- 종료 ------------------------------- --> | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | $('# | ||
+ | // | ||
+ | box_move(); | ||
+ | }); | ||
+ | $('# | ||
+ | box_reset(); | ||
+ | }); | ||
+ | |||
+ | // 박스 이동 | ||
+ | function box_move() | ||
+ | { | ||
+ | var _box = $('# | ||
+ | var _pos = _box.position(); | ||
+ | var _doc_root = $(document); | ||
+ | var _doc_w = _doc_root.width(); | ||
+ | var _doc_h = _doc_root.height(); | ||
+ | |||
+ | var _new_x = get_rand_int(0, | ||
+ | var _new_y = get_rand_int(0, | ||
+ | |||
+ | if (_pos.left == 50) | ||
+ | { | ||
+ | show_box_afterimage(); | ||
+ | _box.animate( | ||
+ | { left: _new_x + " | ||
+ | 200, | ||
+ | " | ||
+ | function() { | ||
+ | setTimeout(function() { box_reset(); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // 박스 리셋 | ||
+ | function box_reset() { | ||
+ | var _box = $('# | ||
+ | var _pos = _box.position(); | ||
+ | show_box_afterimage(); | ||
+ | _box.animate({ left: " | ||
+ | } | ||
+ | |||
+ | function show_box_afterimage() | ||
+ | { | ||
+ | var _box1 = $('# | ||
+ | var _box2 = $('# | ||
+ | var _pos = _box1.position(); | ||
+ | _box2.css({ opacity: 1, left: _pos.left, top: _pos.top }); | ||
+ | _box2.show(); | ||
+ | _box2.animate({ opacity: 0 }, 80, " | ||
+ | } | ||
+ | |||
+ | // https:// | ||
+ | function get_rand_int(min, | ||
+ | min = Math.ceil(min); | ||
+ | max = Math.floor(max); | ||
+ | return Math.floor(Math.random() * (max - min)) + min; // | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ |
language/jquery/jquery_코드조각.1622954475.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)