이 기사의 예는 참조를 위해 JavaScript의 눈송이 비행 효과의 구현을 공유합니다. 특정 내용은 다음과 같습니다
원칙:
1.
2. JS는 생성 된 div를 가져 와서 상단 속성 값을 변경합니다. 하락이 스크린 높이보다 크면 모바일 DIV가 삭제됩니다.
3. 불완전한 것 같으면 스프레이하지 마십시오
효과 미리보기 : http://wjf444128852.github.io/demo02/snow/index.html
HTML 코드 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 눈송이 비행 </title> <link rel = "stylesheet"href = "css/index.css"> <script src = "js/move.js"> </div> </body> </html>
CSS 코드
*{마진 : 0; 패딩 : 0; 목록 스타일 : 없음; 국경 : 없음;} 바디 {너비 : 100%; 높이 : 600px; 배경 :#000;}. snow_parent {위치 : 상대; 너비 : 100%; 높이 : 100%; 오버플로 : 숨겨진; 여백 : 0 Auto;}. 플로트 : 왼쪽; -webkit-transform : 스케일 (.1); -Moz 변환 : 스케일 (.1); -O- 변환 : 스케일 (.1); -MS 변환 : 스케일 (.1); 변환 : 스케일 (.1); 위치 : 절대;}. snow_one {너비 : 180px; 높이 : 180px; 배경 위치 : 0 0; 배경 반복 : 비 반복; 왼쪽 : -70px; 상단 : -95px;}. snow_two {너비 : 140px; 높이 : 140px; 배경 위치 : -220px -18px; 왼쪽 : -30px; 상단 : -75px;}. snow_three {너비 : 150px; 높이 : 150px; 배경 위치 : -400px -15px; 왼쪽 : -20px; 상단 : -80px;}. snow_four {너비 : 160px; 높이 : 160px; 배경 위치 : -10px -206px; } .snow_four {왼쪽 : -10px; 상단 : -85px;}JS 코드 :
/* Creatby jiucheng 2016-4-24*/ wind document.getElementById ( "js_sonw"). AppendChild (snowdiv); // div를 무작위로 생성하고 다른 눈송이를 표시하는 클래스를 만들고 var var whatname = [ "snow_one parent", "snow_two parent", "snow_three parent", "snow_four parent"]; var index = math.floor (math.random ()*WhatName.length); snowdiv.className = WhatName [index]; // div (random)의 왼쪽 속성 값을 가져 와서 생성 된 div var whatleft = getleft ()+'px'에 할당하십시오. snowdiv.style.left = Whatleft; return snowdiv;} // 임의의 왼쪽 속성 값 함수를 가져옵니다 getleft () {// div의 최대 왼쪽 속성 값을 가져옵니다. // 상위 요소의 모든 스타일을 가져옵니다. var var style = window.getComputedStyle (Eleparent); // CSS의 왼쪽은 여기에서 음수 숫자입니다. var maxwidth = parseint (style.width) +70; // 생성 된 div의 왼쪽을 임의의 값으로 var randomleft = math.floor (math.random ()*maxwidth); rendultleft;} // ret it it it het it makedown () {// 움직이는 객체를 가져옵니다 var moveelem = creatdiv (); // 움직이는 객체의 모든 스타일 속성 값 가져 오기 var elestyle = window.getComputedStyle (MoveElem); // 움직이는 객체의 모든 스타일 속성 값을 가져옵니다. var elestyle = wind // 상단 속성을 가져옵니다 값 var var eletop = parseint (elestyle.top); // 움직이는 객체의 상단 속성 값을 동적으로 변경하도록 타이머를 설정하십시오 t var t = setInterval (function () {eletop ++; // 움직이는 객체 moveelem.style.top = eletop+"px"에 새 상단 값을 지불하십시오. ClearInterval (t); // 낙하 속도는 10 밀리 초 떨어진 곳에서 1px} function init () {// 신체 문서의 높이를 동적으로 가져 와서 설정하여 bodybody.style.height = window.innerheight+"px"; // 500 밀리 초마다 움직이는 객체를 생성하고 움직임 함수를 실행합니다.위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.