javascript實現(xiàn)雪花飄落效果
更新時間：2020年08月19日 11:01:20 作者：旺仔520
這篇文章主要為大家詳細介紹了javascript實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
圣誕節(jié)快到了相信許多公司的前端都在會收到一個需求，那就是做一個關(guān)于圣誕節(jié)的專題，而這個專題為了應(yīng)對圣誕節(jié)這個主題都會加上雪花飄呀飄這個小動畫，當(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="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>
代碼很簡單，都是運動用js的一些基礎(chǔ)知識點做出來的，主要是隨機數(shù)和一些判斷。就這么簡單。代碼不是重點，重點是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動態(tài)效果的自己復(fù)制代碼運行就可以了。歡迎給優(yōu)化建議。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
可拖動可改變大小div的實現(xiàn)代碼，非常不錯的應(yīng)用，大家可以參考下。2009-08-08
最近加入到新項目組負責(zé)前端技術(shù)預(yù)研和選型，其中涉及到一個熟悉又陌生的需求——國際化＆本地化。熟悉的是之前的項目也玩過，陌生的是之前的實現(xiàn)僅僅停留在"有"的階段而已。趁著這個機會好好學(xué)習(xí)整理一下，為后面的技術(shù)選型做準備2016-09-09
淺談javascript獲取元素transform參數(shù)
本文主要給大家簡單介紹了javascript獲取元素的transform參數(shù)的方法以及個人的理解，記錄下來分享給大家。2015-07-07
原生JS 實現(xiàn)的input輸入時表格過濾操作示例
這篇文章主要介紹了原生JS 實現(xiàn)的input輸入時表格過濾操作,結(jié)合實例形式分析了JavaScript基于頁面元素遍歷、運算、判斷實現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
這篇文章主要為大家詳細介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細的代碼，解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題，感興趣的小伙伴們可以參考一下2015-11-11
在JavaScript代碼中，多多少少會有判斷語句。業(yè)務(wù)越復(fù)雜，邏輯就越復(fù)雜，判斷就越多。今天給大家整理下JavaScript中代碼里常會用到的那些判斷，有需要的可以參考借鑒。2016-08-08
這篇文章主要介紹了微信小程序身份證驗證方法實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06
vite打包優(yōu)化vite-plugin-compression的使用示例詳解
這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
本篇內(nèi)容給大家總結(jié)了JavaScript的BUG和錯誤，如果大家對此知識點有興趣，可以跟著學(xué)習(xí)參考下。2018-05-05
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和 Web 應(yīng)用和項目的可靠性。現(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實現(xiàn)折線圖。2016-09-09