Javascript는 WebQQ 인터페이스를 모방한 "플로팅 클라우드"를 구현하며 IE7 이상 버전 및 FF_javascript 기술과 호환됩니다.

먼저 사진 자료를 업로드하세요.

배경사진 : 떠다니는 구름사진 : ←——————————사진 D입니다~ 모두 선택하시면 보실 수 있습니다(배경이 하얗기 때문에 구름은 흰색~)... CSS 코드:

코드 복사 코드는 다음과 같습니다. * { 여백: 0 패딩: 0 } 본문 >{ 배경: url("Images/body_bg.jpg") 반복 중심 0 고정 } .cloud { 배경: url("Images/cloud1.png") ; 높이: 250px; 너비: 580px; 위치: 절대 } .hScroll { 숨김; ;/style>

이해: .hScroll은 브라우저의 스크롤 막대를 숨기는 것입니다. 그렇지 않으면 무슨 일이 일어나고 있는지 한눈에 알 수 있으므로 헛소리는 하지 않겠습니다. >본문 코드:

코드 복사 코드는 다음과 같습니다. >이해: StarMove() 함수는 페이지가 로드될 때 호출됩니다. Javascript 코드:

코드 복사

코드 var cloud = null var left = 0; .documentElement.className = "hScroll"; function StartMove() { cloud = document.getElementById("moveCloud"); setInterval(Move, 100) function Move () { 왼쪽 = 1 cloud.style.left = 왼쪽 "px" if (왼쪽 >= (screen.width)) { 왼쪽 = -580; >} }

이해: document.documentElement.className = "hScroll"은 CSS 스타일로 코드를 호출하는 것입니다. 브라우저의 스크롤바 (말도 안되는 소리... 위에서 말하지 않았나요^_^||) 우선 "Floating Cloud" 레이어의 ID를 가져와야 하므로 cloud = document를 사용합니다. getElementById("moveCloud"); cloud는 위에서 정의된 전역 변수이므로 여기서 직접 사용할 수 있습니다(베테랑은 걱정하지 마세요). 새로운 새가 볼 수 있도록 스프레이하세요. 그런 다음 그에게 "타이머"를 제공하세요. " setInterval(Move, 100); 100밀리초마다 한 번씩 Move 함수를 호출합니다. left = 1; left=left 1과 동일합니다. 위 함수(100밀리초마다 호출~)와 함께 사용하고 할당합니다. "floating cloud" 레이어의 원래 좌표로 이동하므로 cloud.style.left = left "px" 뭐야? 무엇이 남았는지 물어보시나요? CSS 스타일의 위치 속성입니다! 못 믿겠다면 DW에 콜론 위치를 써서 나오는지 확인해 볼까요? if (left >= (screen.width)) ; left = -580; (왼쪽에서) 움직이는 "떠있는 구름"의 위치가 화면의 너비보다 크거나 같다고 판단합니다. 화면에서 처음부터 시작하도록 하고 왼쪽 값은 -580으로 설정합니다. CSS를 보면 떠다니는 구름 그림의 크기가 580*250입니다. 길이가 580px인데 -580으로 설정한 이유는 오른쪽부터 조금씩 보여주도록 놔두지 않으면 사진이 올라오자마자 전체가 보여지거든요~ 봤습니다. 오랫동안 내 말을 낭비했습니다. (나 같은) 모든 사람이 이해하는지 모르겠지만 다음은 완료되었습니다. 코드를 .html 파일로 저장하고 이미지를 직접 다운로드해 보십시오. 경로를 변경하는 것을 잊지 마세요! 전체 코드:

코드 복사

코드는 다음과 같습니다. 背景图文移动 * { 여백: 0; 패딩: 0; } body { background: url("Images/body_bg.jpg") 반복 센터 0 고정; } .cloud { 배경: url("Images/cloud1.png"); 높이: 250px; 너비: 580px; 위치: 절대; } .hScroll { 오버플로: 숨김; } var 클라우드 = null; var 왼쪽 = 0; document.documentElement.className = "hScroll"; function StartMove() { cloud = document.getElementById("moveCloud"); setInterval(이동, 100); } function Move() { left = 1; cloud.style.left = 왼쪽 "px"; if (왼쪽 >= (screen.width)) { 왼쪽 = -580; } }

Javascript는 WebQQ 인터페이스를 모방한 "플로팅 클라우드"를 구현하며 IE7 이상 버전 및 FF_javascript 기술과 호환됩니다.

관련 기사