Примеры в этой статье разделяют реализацию эффекта летающего снежинки JavaScript для вашей ссылки. Конкретный контент заключается в следующем
принцип:
1. JS Динамически создает DIV, указывая класс класса для установки разных стилей фонового изображения для отображения различных эффектов снежинки.
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>Snowflakes flying</title> <link rel="stylesheet" href="css/index.css"> <script src="js/move.js"></script></head><body> <div id="js_sonw"> </div> </body> </html>
CSS -код
*{маржа: 0; Заполнение: 0; Список стиля: нет; Граница: нет;} тело {ширина: 100%; Высота: 600px; Фон:#000;}. Snow_parent {позиция: относительно; Ширина: 100%; высота: 100%; переполнение: скрыто; Маржа: 0 Auto;}. Snow_parent div.parent {founal-image: url (../ img/snow.png); Плавание: осталось; -Вебкит-трансформ: масштаб (.1); -Моз-трансформ: масштаб (.1); -О-трансформирование: масштаб (.1); -ms-transform: Scale (.1); преобразование: масштаб (.1); Положение: Absolute;}. Snow_one {ширина: 180px; Высота: 180px; Справочная позиция: 0 0; Восновная переписка: без повторения; слева: -70px; Top: -95px;}. Snow_two {ширина: 140px; Высота: 140px; Справочная позиция: -220px -18px; Слева: -30px; Top: -75px;}. Snow_three {ширина: 150px; Высота: 150px; Справочная позиция: -400PX -15PX; слева: -20px; Top: -80px;}. Snow_four {width: 160px; Высота: 160px; Фоно-позиция: -10px -206px; } .snow_four {Left: -10px; Верх: -85px;}JS -код:
/* creatby jiucheng 2016-4-24*/ window.onload = function () {init ();} // create divfunction createDiv () {// create div и добавить к родительскому элементу var snowDiv = document.createElement ("div"); document.getElementById ("js_sonw"). AppendChild (SnowDiv); // Сделать класс, который создает Div случайным образом и отображает разные снежинки 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 (случайное) и присвоить его созданному div var whatleft = getleft ()+'px'; Snowdiv.style.left = Whatleft; return snowdiv;} // Получить случайное левое значение значения атрибута getLeft () {// Получить максимальное значение левого атрибута Div, то есть ширину родительского элемента var eeparent = document.getElementById ("js_sonw"); // Получить все стили родительского элемента var var style = window.getComputedStyle (ueparent); // слева в CSS является отрицательным числом здесь должно быть вычтено здесь var maxwidth = parseint (style.width) +70; // пусть слева от созданного div будет случайным значением var randomleft = math.floor (math.random ()*maxwidth); return randomLeft;} // Let It MovelOwn () {// Получить движущийся объект var moveelem = createDiv (); // Получить все значения атрибутов стиля vareStyle = window.getComputeDStyle (MoveElem); // Получить все значения атрибутов стиля vareStyle = window.getComputeDStyle (MoveElem); // Получить свое главное значение атрибута var eletop = parseint (elestyle.top); // Установите таймер, чтобы динамически изменить значение верхнего атрибута на движущемся объекте var t = setInterval (function () {eletop ++; // платить новое верхнее значение для движущегося объекта oveleem.style.top = eletop+"px"; // Когда он падает на высоту экрана, остановить таймер и удалять движущийся объект, если eletop> = clearInterval (t); // Скорость падения не имеет 10 миллисекунд до падения 1PX} function init () {// Динамически получить и установить высоту документа тела. // Создание движущегося объекта каждые 500 миллисекунд и выполнять функцию движения var t = setInterval (function () {movelown ();}, 100);}Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.