이 기사의 예에서는 JS를 사용하여 간단한 바운스 효과를 얻을 수 있습니다. 특정 콘텐츠는 코드 섹션을 참조하십시오.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 충돌 공 </title> <style> #box {width : 1000px; 높이 : 800px; 위치 : 상대; 테두리 : 1px 솔리드 레드; 마진 : 50px auto 0; } #boll {너비 : 50px; 높이 : 50px;/* Border-Radius : 25px;*/ Border : 1px Solid Green; 위치 : 절대; 상단 : 66px; 왼쪽 : 88px; . var boll = document.getElementById ( 'boll'); var x = 88, y = 66, timer1 = null, movex = 1, movey = 1; console.log (box.clientwidth-boll.clientWidth); console.log (box.clientwidth-boll.offsetwidth); timer1 = setInterVal (function () {if (if (movex) {// direction x ++ 판사; if (x> = box.clientWidth-boll.clientWidth) {makex = 0;} boll.style.left = x+'px';} else {x--; if (x <= 0) {}}} voll. {y ++; </script> </body> </html>그중에서도 MoveX와 Movey 변수는 모션의 방향입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.