Зима здесь, и многие места в блогах добавили снежинки, поэтому я пошел посмотреть их эффект. Есть несколько кодов эффектов, поэтому я взял их на себя. Друзья нуждаются их и попробовать.
Big Snowflake Pictures:
Код эффекта 1
<script type = "text/javascript" language = "javascript"> (function () {function k (a, b, c) {if (a.addeventlistener) a.addeventlistener (b, c, false); else aTtachevent && a.attachevent ("on" + b, c)} функция g (a) {if (if window.on window.onload! {var b = window.onload; window.onload = function () {b (); a ()}}} функция h () {var a = {}; for (type in {op: ",« слева: ""}) {var b = type == "top"? «Не определен») a [type.tolowercase ()] = window ["page" + b + "смещение"]; else {b = document.documentelement.clientHeight? = window.innerHeight; else if (a.parentelement.clientHeight) b = a.parentelement.clientHeight; else if (a && a.clientHeight) b = a.clientHeight; return b} функция i (a) {this.parent = docome.body; this.createel (this.parent, a); this.size = math. 5; this.el.style.width = math.round (this.size) + "px"; this.el.style.height = math.round (this.size) + "px"; this.maxleft = document.OffsetWidth - this.Size; this.maxTop = document.Offsethehete - this.Size; this.maxleft; this.top = h (). Top + 1; this.Angle = 1,4 + 0,2 * math.random (); this.minangle = 1,4; this.maxangle = 1,6; this.angledelta = 0,01 * math.random (); this.speed = 2 + math.random ()} var j = false; g () {j = vare); true; window.createsnow = function (a, b) {if (j) {var c = [], m = setInterval (function () {f && b> c.length && math.random () <b * 0.0025 && c.push (new i (a)); ! f &&! C.Length && clearInterval (m); for (var e = h (). Top, n = l (), d = c.length-1; d> = 0; d-) if (c [d]) if (c [d] .top <e || c [d] .top + c [d] .size + 1> e + n) {c [d]. null; c.splice (d, 1)} else {c [d] .move (); c [d] .draw ()}}, 40); k (window, "scroll", function () {for (var e = c.length-1; e> = 0; e-) c [e] .draw ()}} else g (fund b)})}; window.removesnow = function () {f = false}; i.prototype = {createel: function (a, b) {this.el = document.createElement ("img"); this.el.setattribut "Absolute"; this.el.style.display = "block"; this.el.style.zindex = "99999"; this.parent.appendchild (this.el)}, Move: function () {if (this.Angle <this.minangle || this.Angle> this.maxangle) this.AngledeLta = -this.Angleta; this.angledelta; this.left += this.speed * math.cos (this.Angle * math.pi); this.top -= this.speed * math.sin (this.Angle * math.pi); if (this.left <0) this.left = this.maxleft; else if (this.left> this.maxleft) this.left = 0 at., function: function: function: 0. {this.el.style.top = math.round (this.top) + "px"; this.el.style.left = math.round (this.left) + "px"}, rement: function () {this.parent.removechild (this.el); this.parent = this.el = null}}) ();Скопируйте и вставьте приведенный выше код непосредственно в файл заголовка или нижний колонтитул в тему. Если вы просто хотите, чтобы страница статьи отображалась, добавьте ее в сингл напрямую. Ниже мы предоставим вам изображение снежинки (необходимый материал). Небольшая картина: вам нужно загрузить его в текущую тему вашего блога, а затем изменить ссылку в коде на местоположение изображения. Эффект, как показано на этой странице.
Код эффекта 2:
<html> <head> <script> function start () {var array = new Array (); var canvas = document.getElementById ("myCanvas"); var context = canvas.getContext ("2d"); для (var i = 0; i <50; i ++) {var new shownow (); array.push (shownow);} time = setInterval (function () {контекст shownow () {var y = parseint (math.random ()*50)*10; var x = parseint (math.random ()*80)*10; this.draw = function (context) {context.font = "50px Calibri "; context.filltext ("*", x, y);} this.move = function () {y+= 20; if (y> 600) {y = 0;}}} </script> </head> <body> <input type =" value = "onclick =" start () "/> <brab/> <canvas id id ved yelcan". синий "> </canvas> </body> </html>Этот эффект демонстрируется следующим образом (он кажется некрасивым, не рекомендуется):
Эффект код третий
На самом деле, если вы реализуете блог WordPress, вы также можете использовать плагин Let It Snow.
Я не буду говорить о том, как использовать плагин Let It Snow. Это ничем не отличается от других установок плагинов. Вы можете напрямую загружать и загружать файлы в папке, оставив снег в/wp-content/plugins/каталог, а затем активировать этот плагин и установить плагин в меню панели управления WordPress. Или поиск непосредственно в библиотеке плагинов в задней части, вы также можете найти ее.
Пусть официальный веб -сайт Let It Snow: нажмите, чтобы посетить
Эффект код четыре
Я видел очень мощный плагин снежной бури в Интернете. Это так здорово, кажется, что код для поиска, пусть снег в Google будет иметь снежные и морозные эффекты, что очень креативно. Если вы думаете, что у вас хорошая детская обувь, вы можете перейти на официальный сайт самостоятельно.
Я нашел простой случайный код эффекта снежного снежина в Интернете, чтобы поделиться с вами (этот эффект написан в чистом коде. Снежинки - *.):
Несколько функций объяснены кратко:
1. retitsnow ()
Это снег (это предложение все еще бесполезно). Затем CreateSnow призван для создания снежинок.
2. CreateSnow ()
Каждая снежинка - это тег <i>, и «*» помещается внутри для имитации снежинок (копия Google не может быть загружена, на самом деле она показывает его как пространство, я сделал солнце ...), а затем положил в большой контейнер под названием Snowbox, и сгенерированные люди выдвигаются в Iarray, чтобы собрать его. Снежинки используют абсолютный метод позиционирования со снегом в качестве эталона. Верх - 0px, а левая использует Math.random ()*window.screen.width, позволяющая создавать снежинки случайным образом в ширине экрана.
Используйте цвет, чтобы контролировать глубину цвета снежинок для получения глубины поля, в диапазоне от 0 до 200
Используйте Fontsize, чтобы контролировать размер снежинок, в диапазоне от 10 пикселей до 15px
Используйте время для контроля интервала вызовов падений снежинок, от 40 до 50 мс.
Используйте Snowinterval, чтобы контролировать интервал генерации снежинок, от 500 мс до 1000 мс.
Затем называется сам рекурсивный вызов, и снежинки постоянно генерируются.
3. Fallown ()
Как следует из названия, это означает, что снежинки падают, со скоростью 2PX, что означает, что каждая вертикальная капля составляет 2PX. В настоящее время сделайте тест. Если снежинки падают до фиксированной высоты, которая выше родительского контейнера, удалите его. Это может снизить давление на браузер. В противном случае, слишком много снежинок приведут к тому, что браузер будет медленнее и медленнее. В любом случае, это было переполнено: скрыто и не видит его, и это чисто, если вы этого не видите. Затем назовите функцию ветра, когда спускается по вертикали, чтобы сделать снежинки более художественными.
4. Windblow ()
Кажется, что имя дует ветром, но на самом деле это эффект отдувания ветра (это еще более бесполезно. Ха -ха). Используйте Math.Sin (), чтобы произвести эффект снежинок, плавающих в воздухе, чтобы снежинки не падали монотонным образом, но упали в форму змеи, контролируя интервал падения, чтобы преемственность была лучше и выглядит более комфортной.
Функция retitsnow () {var snowbox = document.getElementbyid ("snowbox"); var iarray = new Array (); CreateSnow (Snowbox, Iarray);} Функция Fallown (Temobj, iarray) {var speed = 2; var top = parseint (temobj.style.top); Если (топ> 510), когда это достичь,/когда это достигает. давление браузера для (var i = 0; i <iarray.length; i ++) {if (temobj == iarray [i]) {iarray.splice (i, 1); var snowbox = document.getElementbyid ("Snowbox"); Snowbox.Removechild (temobj); false;}}} temobj.style.top = top+speed+"px"; var wind = windblow (temobj, top); temobj.style.left = parseint (temobj.style.left)+wind*2+"px";} функция Windblow (temobj, top) {if parseint (math.rand () Math.sin (top/16); else return math.cos (top/16);} функция CreateSnow (Snowbox, Iarray) {var temobj = document.createElement ("i"); var tomext = document.createtextnode ("*"); temobj.appendchild (temtext); temobj.style.left = parseint (math.random ()*window.screen.width)+"px"; temobj.style.top = "0px"; var temnum = parseint (math.random ()*200); temobj.style.color = "#"+temnum.tostring (16)+temnum.tostring (16)+temnum.tostring (16)+temnum.tostring (16); iarray.push (temobj); snowbox temnum = 0; while (temnum <10) {temnum = parseint (math.random ()*15);} temobj.style.fontsize = temnum+"px"; var time = 0; while (time <40) {time = parseint (math.random ()*50);} temobj.timer = setInterval (function () {fallown (temobj, iarray);}, время); var snowinterval = 0; while (snowinterval <500) {snowinterval = parseint (math.random ()*1000); createTimer = setTimeout (function () {createSnow (Snowbox, Iarray); ClearTimeOut (createtimer);}, SnowInterval);}Демо -адрес: http://demo.vevb.com/js/2014/snow/
Хорошо, четыре кода эффекта заканчиваются здесь. Надеюсь, это может помочь нуждающимся друзьям. Если у вас есть какие -либо вопросы, пожалуйста, оставьте сообщение ниже.