먼저 사진 자료를 업로드하세요. 배경사진 :떠다니는 구름사진 : ←——————————사진 D입니다~ 모두 선택하시면 보실 수 있습니다(배경이 하얗기 때문에 구름은 흰색~)... CSS 코드: 코드 복사 코드는 다음과 같습니다. <br>* <br>{ <br> 여백: 0 <br> 패딩: 0 <br>} <br>본문 >{ <br> 배경: url("Images/body_bg.jpg") 반복 중심 0 고정 <br>} <br>.cloud <br>{ <br>배경: url("Images/cloud1.png") ; <br>높이: 250px; <br>너비: 580px; <br>위치: 절대 <br>} <br>.hScroll <br>{ <br>숨김; ;/style> <br><br> <br>이해: .hScroll은 브라우저의 스크롤 막대를 숨기는 것입니다. 그렇지 않으면 무슨 일이 일어나고 있는지 한눈에 알 수 있으므로 헛소리는 하지 않겠습니다. >본문 코드: <br> </div> <br><br><br>코드 복사<div class="codetitle"> <span><a style="CURSOR: pointer" data="84709" class="copybut" id="copybut84709" onclick="doCopy('code84709')"> 코드는 다음과 같습니다.<u></u> </a><body onload ="StartMove()"> </span>< div class="cloud" id="moveCloud"> </div></div> <div class="codebody" id="code84709"> <br> >이해: StarMove() 함수는 페이지가 로드될 때 호출됩니다. <br>Javascript 코드: <br><br><br> </div> <br>코드 복사<br><br><div class="codetitle"> 코드 <span><a style="CURSOR: pointer" data="62683" class="copybut" id="copybut62683" onclick="doCopy('code62683')"> <u><script 언어=" javascript" type="text/javascript"> </u>var cloud = null </a>var left = 0; .documentElement.className = "hScroll"; </span>function StartMove() { </div>cloud = document.getElementById("moveCloud"); <div class="codebody" id="code62683">setInterval(Move, 100) <br>function Move () { <br>왼쪽 = 1 <br>cloud.style.left = 왼쪽 "px" <br>if (왼쪽 >= (screen.width)) { <br>왼쪽 = -580; >} <br>} <br></script> <br><br> <br>이해: document.documentElement.className = "hScroll"은 CSS 스타일로 코드를 호출하는 것입니다. 브라우저의 스크롤바 (말도 안되는 소리... 위에서 말하지 않았나요^_^||) <br>우선 "Floating Cloud" 레이어의 ID를 가져와야 하므로 cloud = document를 사용합니다. getElementById("moveCloud"); cloud는 위에서 정의된 전역 변수이므로 여기서 직접 사용할 수 있습니다(베테랑은 걱정하지 마세요). 새로운 새가 볼 수 있도록 스프레이하세요. <br>그런 다음 그에게 "타이머"를 제공하세요. " setInterval(Move, 100); 100밀리초마다 한 번씩 Move 함수를 호출합니다. <br>left = 1; left=left 1과 동일합니다. 위 함수(100밀리초마다 호출~)와 함께 사용하고 할당합니다. "floating cloud" 레이어의 원래 좌표로 이동하므로 cloud.style.left = left "px" <br>뭐야? 무엇이 남았는지 물어보시나요? CSS 스타일의 위치 속성입니다! 못 믿겠다면 DW에 콜론 위치를 써서 나오는지 확인해 볼까요? <br>if (left >= (screen.width)) ; left = -580; (왼쪽에서) 움직이는 "떠있는 구름"의 위치가 화면의 너비보다 크거나 같다고 판단합니다. 화면에서 처음부터 시작하도록 하고 왼쪽 값은 -580으로 설정합니다. <br> CSS를 보면 떠다니는 구름 그림의 크기가 580*250입니다. 길이가 580px인데 -580으로 설정한 이유는 오른쪽부터 조금씩 보여주도록 놔두지 않으면 사진이 올라오자마자 전체가 보여지거든요~ <br> 봤습니다. 오랫동안 내 말을 낭비했습니다. (나 같은) 모든 사람이 이해하는지 모르겠지만 다음은 완료되었습니다. 코드를 .html 파일로 저장하고 이미지를 직접 다운로드해 보십시오. 경로를 변경하는 것을 잊지 마세요! </div>전체 코드: <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다. <br><div class="codebody" id="code2204"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><title>背景图文移动</title> <br><style type="text/css"> <br>* <br>{ <br>여백: 0; <br>패딩: 0; <br>} <br>body <br>{ <br> background: url("Images/body_bg.jpg") 반복 센터 0 고정; <br>} <br>.cloud <br>{ <br>배경: url("Images/cloud1.png"); <br>높이: 250px; <br>너비: 580px; <br>위치: 절대; <br>} <br>.hScroll <br>{ <br>오버플로: 숨김; <br>} <br> <br>var 클라우드 = null; <br>var 왼쪽 = 0; <br>document.documentElement.className = "hScroll"; <br>function StartMove() { <br>cloud = document.getElementById("moveCloud"); <br>setInterval(이동, 100); <br>} <br>function Move() { <br>left = 1; <br>cloud.style.left = 왼쪽 "px"; <br>if (왼쪽 >= (screen.width)) { <br>왼쪽 = -580; <br>} <br>} <br>
