겨울이 여기에 있고 많은 블로그 공간이 눈송이를 추가 했으므로 그 효과를 보러갔습니다. 몇 가지 효과 코드가 있으므로 인수했습니다. 도움이 필요한 친구들은 그들을 데려 가서 시도 할 수 있습니다.
큰 눈송이 사진 :
효과 코드 1
<script type = "text/javaScript"language = "javaScript"> (function () {function k (a, b, c) {if (a.addeventListener) A.AddeventListener (b, c, false); else a.attachevent && a.attachevent ( " + b, c)} function g (a) {typeof! A; else {var b = window.onload; wind "undefined") a [type.tolowercase ()] = 창 [ "page" + b + "offset"]; else {b = document.documentElement.clientHeight : documentElement : a [type.tolowercase ()] = b [ "Scroll" + type]}} a {var a, body. = wind 5; this.el.Style.width = Math.Round (this.size) + "px"; this.el.el.style.height = math.round (this.size) + "px"; this.maxleft = document.body.offsetwidth- this.size; this.size; this.maxLeft; this.top = h (). top + 1; this.ight.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 = j = true}); 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 (). 상단, n = l (), d = c.length-1; d> = 0; 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 (Wind b)})}; wind = "block"; this.el.style.zindex = "99999"; this.parent.appendChild (this.el)}, move : function () {if (this.angle <this.minangle || this. this.maxangle) this. * math.pi); this.top -= this.speed * math.sin (this.angle * math.pi); if (this.left <0) this.left = this.maxleft; els. if (this.left> this.maxleft) this.left = 0}, function () {this.el.style.top = math.round (this.top) +. "px"; this.el.style.left = math.round (this.left) + "px"}, 제거 : function () {this.parent.removeChild (this.el); this.parent = this.el = null}}) (); CreatesNow ( "", 40); </script>위의 코드를 주제의 헤더 또는 바닥 글 파일에 직접 복사하여 붙여 넣습니다. 기사 페이지를 표시하려면 단일에 직접 추가하십시오. 아래에서는 눈송이 사진 (필수 재료)을 제공합니다. 작은 사진 : 블로그의 현재 주제에 업로드 한 다음 코드의 링크를 사진 위치로 변경해야합니다. 효과는이 페이지에서 볼 수 있습니다.
효과 코드 2 :
<html> <head> <cript> function start () {var array = new array (); var canvas = document.getElementById ( "mycanvas"); var context = canvas.getContext ( "2d"); for (var i = 0; i <50; i ++) {var shownow = new showSnow (); array.push (showsNow);} time = setInterVal (function () {context.clearRect (0,0, canvas.width, canvas.height); for (var i = 0; i ++) {array [i] .move (); 500); 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> <입력 ="button "value ="start = "start ="syster 3px Solid Blue "> </canvas> </body> </html>이 효과는 다음과 같이 입증됩니다 (추악하고 권장되지 않음) : :
코드 3에 영향을 미칩니다
실제로 WordPress 블로그를 구현하면 Let It Snow 플러그인을 사용할 수도 있습니다.
여기에서 Let It Snow Plug-In 사용 방법에 대해서는 이야기하지 않습니다. 다른 플러그인 설치와 다르지 않습니다. 폴더에서 파일을 직접 다운로드하여 업로드하면/wp-content/plugins/directory에 눈을 snow로 만들고이 플러그인을 활성화하고 플러그인을 WordPress Management 패널 메뉴에서 설정하십시오. 또는 뒷면의 플러그인 라이브러리에서 직접 검색하면 찾을 수도 있습니다.
Snow 공식 웹 사이트 : 방문하려면 클릭하십시오
코드 4에 영향을 미칩니다
온라인에서 매우 강력한 눈보라 플러그인을 보았습니다. 너무 굉장합니다. Google에서 Snow를 검색하기위한 코드가 눈과 서리 효과를 갖게 될 것 같습니다. 이는 매우 창의적입니다. 어린이 신발이 좋은 것으로 생각되면 직접 공식 웹 사이트로 이동할 수 있습니다.
나는 당신과 공유하기 위해 온라인으로 간단한 임의의 눈송이 낙하 효과 코드를 발견했습니다 (이 효과는 순수한 코드로 작성됩니다. 눈송이는 *입니다.) :
몇 가지 기능이 간단히 설명됩니다.
1. letitsnow ()
눈이 내리고 있습니다 (이 문장은 여전히 쓸모가 없습니다). 그런 다음 제작자가 눈송이를 생성하도록 요청됩니다.
2. CreatesNow ()
각 눈송이는 <> 태그이며, "*"는 눈송이를 시뮬레이션하기 위해 내부에 배치됩니다 (Google의 사본을 다운로드 할 수없고 실제로는 공간으로 표시하고, 태양을 만들었습니다 ...) Snowbox라는 큰 용기에 넣고 생성 된 개인이 Iarray로 밀어 넣습니다. 눈송이는 참조로 스노우 박스와 함께 절대 포지셔닝 방법을 사용합니다. 상단은 0px이며 왼쪽은 math.random ()*window.screen.width를 사용하여 화면 너비에서 눈송이를 무작위로 생성 할 수 있습니다.
색상을 사용하여 눈송이의 색 깊이를 제어하여 0에서 200까지의 피사계 심도를 생성합니다.
Fontsize를 사용하여 10px에서 15px 범위의 눈송이 크기를 제어하십시오.
40ms에서 50ms 범위의 눈송이가 떨어지는 통화 간격을 제어하려면 시간을 사용하십시오.
Snowinterval을 사용하여 500ms에서 1000ms 범위의 눈송이 생성 간격을 제어하십시오.
그런 다음 재귀 호출 자체가 호출되고 눈송이가 지속적으로 생성됩니다.
3. Falldown ()
이름에서 알 수 있듯이 눈송이가 2px의 속도로 떨어지는 것을 의미합니다. 즉, 각 수직 드롭이 2px임을 의미합니다. 현재 테스트를 수행하십시오. 눈송이가 고정 된 높이로 떨어지면 부모 용기보다 높으면 제거하십시오. 이렇게하면 브라우저의 압력이 줄어 듭니다. 그렇지 않으면 너무 많은 눈송이로 인해 브라우저가 느려지고 느려집니다. 어쨌든, 그것은 오버플로되었고 숨겨져 있고 그것을 볼 수 없으며, 그것을 보지 않으면 깨끗합니다. 그런 다음 수직으로 내려 가면서 눈송이를보다 예술적으로 만들어 Windblow 기능을 호출하십시오.
4. Windblow ()
이름은 바람이 불고있는 것처럼 보이지만 실제로는 바람이 불는 효과입니다 (이것은 훨씬 더 쓸모가 없습니다. 하하.). Math.sin ()을 사용하여 공중에 떠 다니는 눈송이의 효과를 생성하여 눈송이가 단조로운 방식으로 떨어지지 않지만 뱀 모양으로 떨어지고 떨어지는 간격을 제어하여 연속성이 더 좋고 더 편안해 보일 수 있습니다.
function letitsnow () {var snowbox = document.getElementByid ( "snowbox"); var iarray = new array (); CreateSnow (snowbox, iarray);} 함수 낙하 (temobj, iarray) {var speed = 2; var top = parseint (temobj.style.top); 브라우저 압력 (var i = 0; i <iarray.length; i ++) {if (temobj == iarray [i]) {iarray.splice (i, 1); var snowbox = document.getElementByid ( "Snowbox"); Snowbox.RemoveChild (TemoBj); false;}}}}}} emobj.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.random ())%2 == 1) Math.sin (Top/16); 그렇지 않으면 Math.cos (Top/16);} 함수 CreateSnow (Snowbox, Iarray) {var temobj = document.createElement ( "i"); var temtext = document.creatextnode ( "*"); 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.appendchild (temobj); 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 () {falldown (temobj, iarray);}, time); var snowinterval = 0; CreateTimer = settimeout (function () {CreateSnow (Snowbox, Iarray); Cleartimeout (CreateTimer);}, Snowinterval);}데모 주소 : http://demo.vevb.com/js/2014/snow/
좋아, 네 가지 효과 코드는 여기서 끝납니다. 도움이 필요한 친구들을 도울 수 있기를 바랍니다. 궁금한 점이 있으면 아래 메시지를 남겨주세요.