javascript實(shí)現(xiàn)雪花飄落效果
圣誕節(jié)快到了相信許多公司的前端都在會(huì)收到一個(gè)需求，那就是做一個(gè)關(guān)于圣誕節(jié)的專題，而這個(gè)專題為了應(yīng)對(duì)圣誕節(jié)這個(gè)主題都會(huì)加上雪花飄呀飄這個(gè)小動(dòng)畫，當(dāng)然我們公司也不例外，下面就是本人用js寫的一小段雪花秀啦：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'> <script src='http://m.b3g6.com/bcjs/jquery-1.8.3.min.js'></script> </head> <style> html{ max-width: 720px; } body{ width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; } .snow{ width: 100%; height: 100%; background: pink; overflow: hidden; } .snow_img{ position: absolute; top: -50px; margin-left: 1px; } </style> <body> <div class='snow'></div> <script> $(function(){ $(’body’).css('height',$(window).height()) var wid=$('.snow').width(); var html_snow='<img src=’snow.png’ class=’snow_img’>'; setInterval(function(){$('.snow').append(html_snow);snowFlow();},100); function snowFlow(){ $('.snow_img').each(function(index){ var snow_time=(Math.random()*10+4)*1000; var wid_snow=Math.floor(Math.random()*40+5)+’px’; var float_left=Math.random()*wid*2-wid+'px'; var wid_left=Math.random()*wid+'px'; if( $(this).css('margin-left')==1+'px'){ $(this).css('margin-left',wid_left); } if($(this).width()==0 || $(this).width()==50 ){ $(this).width(wid_snow); } $(this).animate({top:800+'px',left:float_left,},snow_time); if($(this).offset().top==800){ $(this).remove(); } }) } }); </script> </body></html>
代碼很簡單，都是運(yùn)動(dòng)用js的一些基礎(chǔ)知識(shí)點(diǎn)做出來的，主要是隨機(jī)數(shù)和一些判斷。就這么簡單。代碼不是重點(diǎn)，重點(diǎn)是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動(dòng)態(tài)效果的自己復(fù)制代碼運(yùn)行就可以了。歡迎給優(yōu)化建議。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 用Spring JMS使異步消息變得簡單2. 一文帶你徹底理解Java序列化和反序列化3. PHP驗(yàn)證碼工具－Securimage4. js實(shí)現(xiàn)碰撞檢測(cè)5. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問題6. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例7. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)8. Python 下載Bing壁紙的示例9. Python 制作查詢商品歷史價(jià)格的小工具10. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條
網(wǎng)公網(wǎng)安備