JavaScript 웹 페이지 특수 효과 예에 떠 다니는 이미지의 예를 읽은 후에는 배울 가치가 있다고 생각합니다.
눈송이가 떨어지는 효과를 완료하려면 사진을 눈송이 그림으로 변경하십시오.
또한 일부 내용은 상대적으로 구식이므로 학자에 의해 변경합시다.
포함하다:
1. 왼쪽 및 상단의 작업은 IE 브라우저 만 지원합니다. 이것은 괜찮습니다. 크롬을 지원해야합니다.
2. 이미지의 위치를 제어하려면 요소를 검색해야합니다. 그렇지 않은 경우 배열 유지 보수로 변경하고 배열에서 유지되는 객체를 직접 작동시켜 더 빠르지 않습니다.
3. 문서에 요소를 추가하면 JS 코드를 통해 요소 객체를 작성하는 데 직접 변경됩니다.
구현 아이디어 :
1. 10 개의 div를 초기화하고 생성하며,이 모두는 절대적으로 배치되어 있습니다. 각 분할에 눈송이 그림을 넣고 너비와 높이를 설정하고 배열에 저장하여 나중에 눈이 직접 작동 할 수 있도록 배열에 저장하십시오.
2. 각 DIV의 수평 및 수직 좌표를 초기화하고 항상 눈송이에 가을의 시작 위치를 제공하십시오.
3. 수직 드롭 스텝과 수평 스윙 단계로 각 눈송이를 초기화하여 각 눈송이가 떨어지고 다른 속도로 스윙 할 수 있습니다.
4. 눈 기능을 만들고 10 초마다 기능을 조정하십시오. 매번, 그것은 각 눈송이의 길이를 수직으로 제어하기 위해 함수를 제어합니다. 수평 스윙은 사인 함수에 의해 계산되며 진폭을 곱합니다. 이런 식으로 눈송이는 사인 파형에 따라 떨어집니다.
온라인에서 사진을 찾을 수 있습니다.
다음 코드는 IE8+ 및 Chrome과 호환됩니다.
코드 사본은 다음과 같습니다.
<body>
<script language = "javaScript">
// 그림 과정에서 수평 좌표의 궤적은 포인트를 중심으로 한 정현파 곡선입니다.
// settimeout 함수를 사용하여 애니메이션 함수가 완료됩니다.
//그림
var snowsrc = "snowflake.png"
// 눈송이의 수
var no = 10;
// 변수 선언, XP는 수평 좌표를 나타냅니다. YP는 수직 좌표를 나타냅니다.
var dx, xp, yp;
// 변수 선언, AM은 왼쪽과 오른쪽 스윙의 진폭을 나타냅니다. STX는 수평 좌표의 오프셋 단계를 나타냅니다. STY는 수직 좌표의 단계를 나타냅니다.
var am, stx, sty;
{
// 현재 창의 너비를 가져옵니다
clientWidth = document.body.clientWidth;
// 현재 창의 높이를 얻습니다
clientHeight = document.body.clientHeight;
}
var dx = 새로운 배열 ();
var xp = 새로운 배열 ();
var yp = new Array ();
var am = 새로운 배열 ();
var stx = new Array ();
var sty = new Array ();
var Snowflakes = New Array ();
for (i = 0; i <no; ++ i) {
dx [i] = 0;
// I-th 사진의 수평 좌표의 초기 값
xp [i] = math.random ()*(clientWidth-50);
yp [i] = math.random ()*clientHeight; // I-th 사진의 수직 좌표의 원래 값
am [i] = math.random ()*20; // I-th 사진의 왼쪽 및 오른쪽 스윙의 진폭
stx [i] = 0.02 + math.random ()/10; // I-th 사진의 X 방향의 단계 길이
sty [i] = 0.7 + math.random (); // I-th 그림 Y 방향의 단계 길이
// 눈송이 사진을 들고 절대 좌표를 설정하는 DIV를 생성합니다.
var snowflakediv = document.createElement ( 'div');
snowflakediv.setattribute ( 'id', 'dot'+ i);
snowflakediv.style.position = '절대';
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
// 눈송이 이미지 객체를 생성하고 너비와 높이를 설정하고 DIV를 추가하십시오.
var snowflakeimg = document.createElement ( 'IMG');
snowflakeimg.setattribute ( 'src', snowsrc);
snowflakeimg.style.width = 30;
snowflakeimg.style.height = 30;
// 눈송이 DIV를 문서에 추가하고 배열을 통해 저장하십시오.
Snowflakediv. AppendChild (Snowflakeimg);
document.body.appendchild (snowflakediv);
눈송이 [i] = 눈 플래시;
}
함수 snow () {
for (i = 0; i <no; ++ i) {
// I-th 사진의 수직 좌표 + 단계 길이
yp [i] += sty [i];
// 새 좌표가 화면의 하단 가장자리를 초과하면 수평 좌표, 수직 좌표 및 X 방향의 단계 크기 및 y 방향의 단계 크기를 포함하여 그림의 정보를 재설정합니다.
if (yp [i]> clientHeight-50) {
// 그림의 수평 좌표를 재 할당합니다
xp [i] = math.random ()*(clientWidth-Am [i] -30);
// 그림의 수직 좌표를 재 할당합니다
yp [i] = 0;
}
dx [i] += stx [i]; // 한 단계를 추가하십시오
// 배열에서 해당 눈송이 DIV를 직접 조작합니다
var snowflakediv = 눈송이 [i];
// 그림의 수직 좌표를 업데이트합니다
snowflakediv.style.top = yp [i];
// 그림의 수평 축을 업데이트합니다
snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// 애니메이션 새로 고침의 기간을 설정합니다
settimeout ( "snow ()", 10);
}
// snowie () 함수를 호출합니다
눈();
</스크립트>
</body>
위는 모든 코드이며 그 효과는 상당히 좋습니다. 구체적인 설명은 의견을 참조하십시오. 나는 여기서 말도 안되는 말을 많이하지 않을 것입니다. 모든 사람에게 도움이되기를 바랍니다.