После прочтения примеров изображения, плавающего вниз в примерах специального эффекта на веб -странице JavaScript, я думаю, что это стоит изучить.
Измените картинку на снежинка, чтобы завершить эффект падения снежинки.
Более того, некоторые из содержимого относительно устарели, поэтому давайте изменим их на ученых.
включать:
1. Операции слева и сверху поддерживают только браузер. Это нормально. Он должен поддерживать хром.
2. Чтобы контролировать местонахождение изображения, вам также необходимо искать элемент. Если нет, то измените его на техническое обслуживание массива и непосредственно управляйте объектами, поддерживаемыми в массиве, что не будет быстрее.
3. Добавление элементов в документ напрямую изменяется в создании объектов элементов через код JS.
Идеи реализации:
1. Инициализируйте и генерируйте 10 DOV, все из которых абсолютно позиционируются. Поместите изображение снежинки в каждом DIV, установите ширину и высоту и сохраните ее в массиве, чтобы функции, которые снег впоследствии могут работать напрямую.
2. Инициализируйте горизонтальные и вертикальные координаты каждого DIV и всегда придайте снежинкам исходное положение для падения.
3. Инициализируйте каждую снежинка с вертикальным шагом капли и горизонтальным шагом качания, чтобы каждая снежинка упала и качалась с другой скоростью.
4. Сделайте функцию снега, отрегулируйте функцию каждые 10 секунд. Каждый раз он контролирует функцию, чтобы контролировать длину каждой снежинки, падающую вертикально, и вычисляет значение синуса через синусную функцию и умножает ее на амплитуду. Таким образом, снежинки падают в форме синусоидальной формы.
Вы можете найти какие -либо фотографии в Интернете.
Следующий код совместим с IE8+ и Chrome.
Кода -копия выглядит следующим образом:
<Тело>
<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 = new Array ();
var xp = new Array ();
var yp = new Array ();
var am = new Array ();
var stx = new Array ();
var sty = new Array ();
var Snowflakes = new Array ();
for (i = 0; i <no; ++ i) {
dx [i] = 0;
// начальное значение горизонтальной координаты изображения i-й
xp [i] = math.random ()*(clientwidth-50);
yp [i] = math.random ()*clientHeight; // исходное значение вертикальной координаты изображения i-th
am [i] = math.random ()*20; // амплитуда левого и правого колебания изображения i-й
stx [i] = 0,02 + math.random ()/10; // Длина шага направления x изображения i-й
sty [i] = 0,7 + math.random (); // Длина шага в направлении изображения i-й
// генерируйте Div, который удерживает изображение снежинки и устанавливает его абсолютные координаты
var snowflakediv = document.createElement ('div');
snowflakediv.setattribute ('id', 'dot'+ i);
Snowflakediv.style.position = 'Absolute';
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;
// Добавить снежинок в документ и сохранить его через массив
Snowflakediv.appendchild (Snowflakeimg);
document.body.appendchild (Snowflakediv);
снежинки [i] = снежколкейдв;
}
функция snow () {
for (i = 0; i <no; ++ i) {
// вертикальная координата плюс шаг длина изображения i-й
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]; // добавить один шаг
// непосредственно манипулируют соответствующим дивизоном снежинки в массиве
var snowflakediv = снежинки [i];
// Обновление вертикальных координат изображения
Snowflakediv.style.top = yp [i];
// Обновление горизонтальной оси изображения
Snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// Установите период времени для обновления анимации
setTimeout ("snow ()", 10);
}
// Вызов функции Snowie ()
снег ();
</script>
</Body>
Вышеуказанное - все код, и эффект довольно хороший. Для конкретного объяснения, пожалуйста, обратитесь к комментариям. Я не буду говорить здесь много чушь. Я надеюсь, что это будет полезно для всех.