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.propowerdrill.cn/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>
代碼很簡(jiǎn)單，都是運(yùn)動(dòng)用js的一些基礎(chǔ)知識(shí)點(diǎn)做出來的，主要是隨機(jī)數(shù)和一些判斷。就這么簡(jiǎn)單。代碼不是重點(diǎn)，重點(diǎn)是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動(dòng)態(tài)效果的自己復(fù)制代碼運(yùn)行就可以了。歡迎給優(yōu)化建議。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用ajax跨域調(diào)用springboot框架的api傳輸文件2. ASP.NET MVC把數(shù)據(jù)庫中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字3. idea右鍵沒有java class選項(xiàng)問題解決方案4. 通過python調(diào)用adb命令對(duì)App進(jìn)行性能測(cè)試方式5. Python查詢oracle數(shù)據(jù)庫速度慢的解決方案6. python新手學(xué)習(xí)可變和不可變對(duì)象7. JS中map和parseInt的用法詳解8. vue中關(guān)于checkbox使用的問題9. python 實(shí)現(xiàn)mysql自動(dòng)增刪分區(qū)的方法10. Python matplotlib畫圖時(shí)圖例說明(legend)放到圖像外側(cè)詳解
網(wǎng)公網(wǎng)安備