Musim dingin ada di sini, dan banyak ruang blog telah menambahkan kepingan salju, jadi saya pergi untuk melihat efeknya. Ada beberapa kode efek, jadi saya mengambil alih. Teman yang membutuhkan dapat mengambil alih dan mencobanya.
Gambar kepingan salju besar:
Kode efek 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("on" + b, c)}function g(a) {if (typeof window.onload != "function") window.onload = a;else {var b = window.onload; window.onload = function () {b (); a ()}}} function h () {var a = {}; untuk (type in {top: "", kiri: ""}) {var b = type == "TOP" "? "Undefined") a [type.tolowercase ()] = window ["page" + b + "offset"]; else {b = document.documentelement.clientHeight? = window.innerHeight; lain jika (a.parentelement.clientHeight) b = a.parentelement.clientHeight; lain jika (a && a.clientHeight) b = a.clientHeight; return b} function i (a) {this.parent = document.body; this.createel (this.parent, a); ini. 5; this.el.style.width = math.round (this.size) + "px"; this.el.style.height = math.round (this.size) + "px"; this.maxleft = document.body.offsetwidth - this.size; this.maxtop = document.offsetheighheight -this. 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 * foate.random (); this.speed = 2 + math.randelta ()} founde (); this.speed = 2 + math.randelta ()} found true; window.createSnow = function (a, b) {if (j) {var c = [], m = setInterval (function () {f && b> c.length && math.random () <b * 0,0025 && c.push (baru i (a)); Lai f &&! C.Length && clearInterval (m); untuk (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) {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 ()}} ge (e> = 0; e-) c [e] .draw ()}} ge (e> = 0; e-) c [e] .draw ()}}} ge (e> = 0; e-) c [e] .draw ()}} ge (e> = 0; e-) c [e] .draw ()}} ge (e> = 0; e-) c [e] .draw ()}} lainnya g (e> = 0; e-) c [e]. b)})}; window.removesnow = function () {f = false}; i.prototype = {createel: function (a, b) {this.el = document.createElement ("img"); this.el.setAttribute ("src", b + "Alamat tautan absolut dari gambar snowflake gambar"); this. "Absolute"; this.el.style.display = "block"; this.el.style.zindex = "99999"; this.parent.appendChild (this.el)}, pindahkan: function () {if (this.angle <this.minangle || this.angle> this.maxangle) this.angledelt < -this. 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; if if (left> this.max ini. {this.el.style.top = Math.round(this.top) + "px";this.el.style.left = Math.round(this.left) + "px"},remove: function() {this.parent.removeChild(this.el);this.parent = this.el = null}}})();createSnow("", 40);</script>Salin dan tempel kode di atas langsung ke file header atau footer di topik. Jika Anda hanya ingin halaman artikel ditampilkan, lalu tambahkan ke single secara langsung. Di bawah ini, kami akan memberi Anda gambar kepingan salju (bahan yang diperlukan). Gambar Kecil: Anda perlu mengunggahnya ke topik blog Anda saat ini, dan kemudian mengubah tautan dalam kode ke lokasi gambar. Efeknya seperti yang ditunjukkan pada halaman ini.
Kode efek 2:
<Html> <Head> <script> function start () {var array = array baru (); var canvas = document.geteLementById ("mycanvas"); var context = canvas.getContext ("2d"); for (var i = 0; i <50; i ++ showNow (); array.push (showNow);} waktu = setInterval (function () {context.clearrect (0,0, canvas.width, canvas.height); untuk (var i = 0; i <array.length; i ++) {array [i] .move (); iTray showNow () {var y = parseInt (math.random ()*50)*10; var x = parseInt (math.random ()*80)*10; this.draw = fungsi (konteks) {context.font = "50px Calibri";context.fillText("*",x,y);}this.move=function(){y+=20;if(y>600){y=0;}}}</script></head><body><input type="button" value="start" onclick="start()" /><br/><canvas id="mycanvas" style="border: 3px solid Biru "> </ Canvas> </body> </html>Efek ini ditunjukkan sebagai berikut (rasanya jelek, tidak disarankan):
Efek Kode Tiga
Bahkan, jika Anda mengimplementasikan blog WordPress, Anda juga dapat menggunakan plug-in Let It Snow.
Saya tidak akan berbicara tentang cara menggunakan Let It Snow plug-in di sini. Tidak ada bedanya dengan instalasi plug-in lainnya. Anda dapat langsung mengunduh dan mengunggah file di folder Biarkan salju ke/wp-content/plugin/direktori, dan kemudian aktifkan plug-in ini dan atur plug-in di menu panel manajemen WordPress. Atau cari langsung di pustaka plug-in di bagian belakang, Anda juga dapat menemukannya.
Biarkan Situs Web Resmi Snow: Klik untuk Mengunjungi
Efek Kode Empat
Saya telah melihat plugin badai salju yang sangat kuat secara online. Ini sangat mengagumkan, tampaknya kode untuk mencari Biarkan Snow on Google akan memiliki efek salju dan es, yang sangat kreatif. Jika Anda pikir Anda memiliki sepatu anak -anak yang baik, Anda dapat pergi ke situs web resmi sendiri.
Saya menemukan kode efek jatuh dari kepingan salju acak sederhana untuk dibagikan kepada Anda (efek ini ditulis dalam kode murni. Kepingan salju adalah *.):
Beberapa fungsi dijelaskan secara singkat:
1. Letitsnow ()
Snowing (kalimat ini masih tidak berguna). Kemudian CreateSnow dipanggil untuk menghasilkan kepingan salju.
2. CreateSnow ()
Setiap kepingan salju adalah tag <i>, dan "*" ditempatkan di dalam untuk mensimulasikan kepingan salju (salinan Google tidak dapat diunduh, itu sebenarnya menunjukkannya sebagai ruang, saya membuat matahari ...), dan kemudian memasukkannya ke dalam wadah besar yang disebut Snowbox, dan orang -orang yang dihasilkan didorong ke Iarray untuk mengumpulkannya. Kepingan salju menggunakan metode penentuan posisi absolut dengan Snowbox sebagai referensi. Atas adalah 0px, dan kiri menggunakan math.random ()*window.screen.width untuk memungkinkan kepingan salju dihasilkan secara acak dalam lebar layar.
Gunakan warna untuk mengontrol kedalaman warna kepingan salju untuk menghasilkan kedalaman bidang, mulai dari 0 hingga 200
Gunakan fontsize untuk mengontrol ukuran kepingan salju, mulai dari 10px hingga 15px
Gunakan waktu untuk mengontrol interval panggilan kepingan salju yang jatuh, mulai dari 40ms hingga 50ms
Gunakan Snowinterval untuk mengontrol interval generasi kepingan salju, mulai dari 500ms hingga 1000ms
Kemudian panggilan rekursif itu sendiri dipanggil, dan kepingan salju terus -menerus dihasilkan.
3. Falldown ()
Seperti namanya, itu berarti kepingan salju jatuh, dengan kecepatan 2px, yang berarti bahwa setiap tetes vertikal adalah 2px. Saat ini, lakukan tes. Jika kepingan salju turun ke ketinggian tetap, yang lebih tinggi dari wadah induk, maka lepaskan. Ini dapat mengurangi tekanan pada browser. Kalau tidak, terlalu banyak kepingan salju akan menyebabkan browser menjadi lebih lambat dan lebih lambat. Ngomong -ngomong, itu telah meluap: tersembunyi dan tidak bisa melihatnya, dan bersih jika Anda tidak melihatnya. Kemudian panggil fungsi Windblow sambil turun secara vertikal untuk membuat kepingan salju lebih artistik.
4. Windblow ()
Sebuah nama tampaknya bertiup angin, tetapi sebenarnya efek dari angin bertiup (ini bahkan lebih tidak berguna. Haha.). Gunakan matematika.
fungsi letitsnow () {var snowbox = document.geteLementById ("snowbox"); var iarray = array baru (); createSnow (snowbox, iarray);} falldown (temobj, iarray) {var speed = 2; var top = parseint (temobj.style.top); if top> 510 var top = parseInt (temobj.style.top); if top> 510 untuk (var i = 0; i <iarray.length; i ++) {if (temobj == iarray [i]) {iarray.splice (i, 1); var snowbox = document.getElementById ("snowbox"; snowbox.removechild (temobj); return false;}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} wind = windblow (temobj, top); temobj.style.left = parseInt (temobj.style.left)+angin*2+"px";} function windblow (temobj, top) {if (parseint (math.random ())%2 == 1) return math.sin (Top/16); createSnow (snowbox, iArray) {var temobj = document.createelement ("i"); var temtext = document.createTextNode ("*"); temobj.appendchild (temtext); temobj.style.left = parseInt (math.random ()*window.screen.width)+"px"; temobj.style.top = "0px"; temnum = parseInt (math.random ()*200); temobj.style.color = "#"+temnum.tostring (16)+temnum.tostring (16)+temnum.tostring (16)+temnum.tostring (16); iarray.push ( temnum = 0; while (temnum <10) {temnum = parseInt (math.random ()*15);} temobj.style.fontsize = temnum+"px"; var waktu = 0; while (time <40) {time = parseInt (math.random ()*50);} temobj.timer = setInterval (function () {falldown (temobj, iarray);}, waktu); var snowinterval = 0; while (snowinterval <500) {snowinterval = parseint (parseint createTimer = setTimeout (function () {createSnow (snowbox, iArray); clearTimeout (createTimer);}, snowinterval);}Alamat demo: http://demo.vevb.com/js/2014/snow/
Oke, empat kode efek berakhir di sini. Semoga ini dapat membantu teman yang membutuhkan. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan di bawah ini.