javascript實現雪花飄落效果
阿新 • • 發佈：2020-08-20
聖誕節快到了相信許多公司的前端都在會收到一個需求，那就是做一個關於聖誕節的專題，而這個專題為了應對聖誕節這個主題都會加上雪花飄呀飄這個小動畫，當然我們公司也不例外，下面就是本人用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的一些基礎知識點做出來的，主要是隨機數和一些判斷。就這麼簡單。程式碼不是重點，重點是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動態效果的自己複製程式碼執行就可以了。歡迎給優化建議。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。